У меня есть простой пример CSS, и я не могу понять поведение одного из моих div, когда отображается горизонтальная прокрутка. итак ... когда в окне моего браузера должна отображаться горизонтальная прокрутка (когда ширина окна меньше ширины моего содержимого "content" (1024px)), мой "нижний колонтитул" div (с тем же родителем "content" и 100%) ширина), кажется, получает «дополнительное пустое пространство» на правой стороне. это пространство увеличивается, когда я уменьшаю ширину окна. Любые идеи о том, как я могу получить его, или почему это происходит? Спасибо!
вот мой код:
css:
<style type="text/css">
html, body {
height: 100%;
width:100%;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
font-variant:normal;
}
* {
margin: 0;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#content{
width:1024px;
margin:0px auto;
background-color:#990;
height:780px;
}
.footer, .push {
height: 4em;
width:100%;
}
#footer-content{
height:10px;
background-color:#09F;
width:100%;
}
</style>
html:
<body>
<div class="wrapper">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque varius tortor vitae pretium. Quisque magna ipsum, accumsan sit amet pretium sed, iaculis feugiat nibh. Donec vitae dui eros, eu ultricies nulla. Morbi aliquet, nisi in tincidunt rutrum, nisl justo sagittis nisi, nec dignissim orci elit vitae tortor. </p>
</div>
<div class="push"></div>
</div>
<div class="footer" style="background-color:#900; width:100%;">
<div id="footer-content"></div>
</div>
</body>