gpt4 book ai didi

html - 边距导致 100% 高度以提供水平滚动条

转载 作者:太空宇宙 更新时间:2023-11-04 04:14:54 25 4
gpt4 key购买 nike

自从我手动编写网站以来已经有一段时间了,现在我遇到了一个问题,即我的顶部边距导致 100% 高度给出了一个令人讨厌的滚动条,如 fiddle 所示: http://jsfiddle.net/qKGzA/

我不知道如何在不切断页脚的情况下摆脱它(比如使用 overflow:hidden)。这可能是一个简单的解决方案,但我想不出 :)

感谢您的帮助!

我的代码:

 html, body{
background-color:#ececec;

height:100%;
width: 100%;

margin:0;
padding:0;

}

div#wrapper{
background-color:#ffffff;

width: 962px;
height: auto !important;
min-height: 100%;
height:100%;

margin:0 auto;
padding:20px 15px 0px 15px;

position:relative;
display:block;
}

footer{
background-color:#363636;

width:95%;
height: 15px;

margin:0;
padding:10px;

position:absolute;
bottom:0;

font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#e1e1e1;
text-align:center;
}

footer p{
margin:0;
padding:0;
display:inline-block;
}
footer p.divider{
margin:0 20px;
}

HTML:

    <body>


<div id="wrapper" >
<header>
header header
</header>
<menu> Menu menu</menu>
<section>
section section
</section>
<footer>
<p>x</p><p class="divider">~</p>
<p>x</p><p class="divider">~</p>
<p>x</p><p class="divider">~</p>
<p>x</p>
</footer>
</div>



</body>

最佳答案

div#wrapper 具有高度:100% 和填充:20px 15px 0px 15px 使其成为 100% + 20 像素。如果你添加

box-sizing:border-box;  

div#wrapper 的填充将在 100% 内,滚动条消失。

非 css3 的替代方法是将元素放置在 div#wrapper 内部的顶部,高度为 20 像素。或许将 20px 顶部填充添加到非 CSS3 浏览器包装器内的 header 元素。

关于html - 边距导致 100% 高度以提供水平滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20103420/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com