调整调整窗口大小div

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

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

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

来源

2017-09-19 Varun Verma

您需要删除的固定高度（'高度：30PX;'）。这个值不会在文本换行时神奇地调整它自己。 – Turnip

这似乎是调整最新的chrome浏览器。这是一个浏览器特定的问题？ – jfeferman

@turnip - 我将高度从30px修改为10％，它可以工作。但是页脚的高度对我来说太高了 - 在底部留下了很多空白。然后我将其设置为5％，但这不适用于调整大小。我希望高度与文字高度一样多，并且可以调整大小。有什么建议么？ –

根据以上人们的建议，我在此粘贴答案，以供其他人希望看到有效的解决方案。

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

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

来源

2017-09-22 20:04:39

由于@turnip指出您的div有一个固定的高度，这意味着你无法看到项目的休息，因为他们溢出容器。

尝试删除height: 30px;。要在足够宽的屏幕上实现此高度，只需为h2标记添加margin-bottom: 0;即可。

P.S.考虑使用类而不是ID来设计布局的样式，特异性更低，并且被认为是一种很好的使用方法。

P.P.S.为什么你使用h2作为链接列表，ul和li怎么样？

来源

2017-09-19 14:55:22 Olga

我是一个UI新手，所以这是我想出的。但是我可以尝试ul和li作为下一步，并让CSS使用类而不是id。我在我的顶级评论中提到了将高度从px更改为％，但这有它自己的问题。还有什么想法？ –

我的答案已经涵盖底部的额外空间，使用百分比值不会完全起作用。 – Olga

我想解决的一些点的位置：（1）“高度”属性

#footer-background { 
    position: fixed; 
    height: 30px; 
    left: 0%; 
    bottom: 0%; 
    z-index: 50; 
    width: 100%; 
    background: #000000; 
    opacity: 0.80; 
}

在上面的代码段所添加高度：30像素;这意味着，如果内容环绕，则限制了此元素的增长。你可以使用padding：20px;或者任何你想要的大小，这样当你缩小屏幕尺寸时，内容将包裹在元素内。（2）H2具有预定义的CSS属性

#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; 
}

h2元素具有预定义的余量。而不是仅仅删除保证金顶部，而是尝试从所有h2附近删除保证金。即保证金：0; 我希望这会帮助你理解这一点。

来源

2017-09-19 16:55:22

感谢您的回答和解释。它适用于将div设置为％的高度，并将h2的margin设置为0。 –

调整调整窗口大小div

回答

相关问题