在调整窗口大小时调整div大小 [英] Resize div on resizing window

问题描述

我为网站构建了HTML / CSS页脚。但是，当我调整屏幕大小时，页脚不会调整大小，我只能看到剪切页脚。我希望页脚div能够调整大小，以便随时查看所有文字。任何帮助将不胜感激。

/ * Footer Style * /＃背景{position：fixed; height：30px;剩下：0％;底部：0％; z-index：50;宽度：100％;背景：＃000000;不透明度：0.80;}＃footer-box {width：95％;保证金：汽车; padding：0 10px;}＃footer-box h2 {margin-top：0; font-size：20px; text-align：center; line-height：30px; font-weight：normal; font-family：Arial，sans-serif;颜色：＃A9A9A9;}＃页脚框a {text-decoration：none;概要：无; color：＃A9A9A9;}＃footer-box a：hover {text-decoration：underline;}

 <！ - 页脚栏 - >< div id =footer-background> < div id =footer-box> < H2> < a href =/ abc />标题1< / a> | < a href =/ abc />标题2< / a> | < a href =/ abc />标题3< / a> | < a href =/ abc />标题4< / a> | < a href =/ abc />标题5< / a> | < a href =/ abc />标题6< / a> | < a href =/ abc />标题7< / a> | < a href =/ abc />标题8< / a> < / H2> < / div><！ -  / Footer bar  - >  

解决方案

基于上述人们的建议，我在此粘贴回答，以供其他人希望看到一个可行的解决方案！

.footer-box {position：fixed; font-family：Arial，sans-serif;颜色：#FFFFFF; background-color：＃000000; font-size：11px;宽度：100％;不透明度：0.8; z-index：50; bottom：0px; left：0px;}。footer-box h2 {margin-top：0; margin-bottom：0; font-size：20px; text-align：center; line-height：30px; font-weight：normal; font-family：Arial，sans-serif;颜色：＃A9A9A9;}。footer-box a {text-decoration：none;概要：无;颜色：＃A9A9A9;}。footer-box a：hover {text-decoration：underline;}

 < div class =footer-box> < H2> < a href =/ weddings />婚礼< / a> | < a href =/ cityhall />市政厅< / a> | < a href =/ engagement / />订婚< / a> | < a href =/ barmitzvah /> Bar Mitzvah，Quinceanera< / a> | < a href =/ birthdays />生日< / a> | < a href =/ maternity />孕妇< / a> | < a href =/ portraits />肖像< / a> < / H2> < / div>  

I built an HTML/CSS footer for a site. But when I resize the screen, the footer doesn't resize and I can only see a clipped footer. I'd like the footer div to resize so I can see all the text at any time. Any help would be appreciated.

/* Footer Style */
#footer-background {
	position: fixed;
	height: 30px;
	left: 0%;
	bottom: 0%;
	z-index: 50;
	width: 100%;
	background: #000000;
	opacity: 0.80;
}
#footer-box{
	width: 95%;
	margin: auto;
	padding: 0 10px;
}
#footer-box h2{
	margin-top: 0;
	font-size: 20px;
	text-align: center;
	line-height: 30px;
	font-weight: normal;
	font-family: Arial, sans-serif;
	color: #A9A9A9;
}
#footer-box a{
	text-decoration: none;
	outline: none;
	color: #A9A9A9;
}
#footer-box a:hover{
	text-decoration: underline;
}

<!-- Footer bar -->
<div id="footer-background">
	<div id="footer-box">
		<h2>
		<a href="/abc/">Title 1</a> |
		<a href="/abc/">Title 2</a> |
		<a href="/abc/">Title 3</a> |
		<a href="/abc/">Title 4</a> |
		<a href="/abc/">Title 5</a> |
		<a href="/abc/">Title 6</a> |
		<a href="/abc/">Title 7</a> |
		<a href="/abc/">Title 8</a>
		</h2>			
	</div>
</div>
<!--/ Footer bar -->

解决方案

Based on suggestions from folks above, I am pasting the answer here for reference to others who would like to see a working solution!

.footer-box{
	position: fixed;
	font-family: Arial, sans-serif;
	color: #FFFFFF;
	background-color: #000000;
	font-size: 11px;
	width: 100%;
	opacity: 0.8;
	z-index: 50;
	bottom: 0px;
	left: 0px;
}
.footer-box h2{
	margin-top: 0;
	margin-bottom: 0;
	font-size: 20px;
	text-align: center;
	line-height: 30px;
	font-weight: normal;
	font-family: Arial, sans-serif;
	color: #A9A9A9;
}
.footer-box a{
	text-decoration: none;
	outline: none;
	color: #A9A9A9;
}
.footer-box a:hover{
	text-decoration: underline;
}

<div class="footer-box">
	<h2>
	<a href="/weddings/">Weddings</a> |
	<a href="/cityhall/">City Hall</a> |
	<a href="/engagements/">Engagements</a> |
	<a href="/barmitzvah/">Bar Mitzvah,Quinceanera</a> |
	<a href="/birthdays/">Birthdays</a> |
	<a href="/maternity/">Maternity</a> |
	<a href="/portraits/">Portraits</a>
	</h2>			
</div>

这篇关于在调整窗口大小时调整div大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！