CSS-边距顶部导致不必要的身体滚动条 [英] css - margin top causes unwanted body scroll bar

问题描述

我遇到的情况是，我需要保持 html，正文为{height:100％;} ，同时添加相对于 .content 的边距或位置，以便其推送从顶部向下30像素.
问题在于这样做会导致滚动条显示在右侧.
.content 的高度将更改，因此如果增加高度，则可能会有滚动条.

如何解决此问题，以便在 .content 在不强制 overflow-y:隐藏; 的情况下没有增加高度的情况下摆脱侧面滚动条?>

这是我的小提琴 http://jsfiddle.net/nalagg/5bwBx/

html:

 < div id ='container'>< div class ='header'></div>< div class ='content'></div>< div class ='footer'></div></div> 

css:

  html，正文{height:100％;}#container {高度:100％；宽度:400px;margin:0自动;背景颜色:灰色；}.header {height:20px;宽度:400px;背景颜色:红色；}.content {height:200px;宽度:400px;位置:相对；顶部:30px；背景颜色:蓝色；}.footer {height:20px;宽度:400px;背景颜色:绿色；} 

解决方案

一种简单的解决方案，主体上的 margin:0; 和 padding:0; .
原因是要重置在页边距和填充上设置的所有默认值.

  html，正文{height:100％;保证金:0;填充:0;} 

演示

I have a situation where i need to keep html, body {height:100%;} while adding margin or position relative to the .content so that it pushes down 30px from top.
The problem is that doing this causes scrollbars to appear on the right.
The height of .content will change so there might be scrollbars if the height is increased.

How can i fix this so that i get rid of the side scrollbars when .content does not have increased height without forcing overflow-y: hidden;?

heres my fiddle http://jsfiddle.net/nalagg/5bwBx/

html:

<div id='container'>
    <div class='header'></div>
    <div class='content'></div>
    <div class='footer'></div>
</div>

css:

html, body {height:100%;}
#container{height:100%; width:400px; margin:0 auto; background-color:grey;}
    .header{ height:20px; width:400px; background-color:red;}
    .content{ height:200px; width:400px;  position:relative; top:30px; background-color:blue; }
    .footer{ height:20px; width:400px; background-color:green;}

解决方案

One simple solution, margin:0; and padding:0; on the body.
The reason of this, is to reset all the defauls set on the margins and paddings.

html, body {height:100%; margin:0; padding:0;}

DEMO

这篇关于CSS-边距顶部导致不必要的身体滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！