带边距的div高度填充容器答案

【问题标题】：Div height fill container with margin带边距的div高度填充容器
【发布时间】：2013-05-10 19:51:32
【问题描述】：

看看我的html和css：

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

.wrapper {
    background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: auto;
}

.content {  
    margin: 10px auto 20px auto;
    width: 724px;
    border: black 1px solid;
}

HTML：

<body>
    <div class="wrapper">
        <div class="content">

        </div>
    </div>
</body>

默认情况下，我的包装器 div 将窗口宽度和窗口高度作为其大小。我希望我的内容 div 始终填充包装器高度并保持其边距，问题是我无法设置内容 div 的高度 = 100%，因为它有边距，并且会使包装器 div 溢出。 Here 是我的 jsfiddle

编辑

举例说明问题：

假设div.wrapper的高度= 200px

div.content 的高度将是 200 - (10 + 20) = 170px

我知道我可以通过 jquery 做到这一点，但我想用 html/css 找到解决方案

注意：div.wrapper 的高度取决于用户的屏幕分辨率。

解决

感谢大家的关注！对此，我真的非常感激。我通过使用 css3 calc 函数找到了解决方案 here。我认为这些信息会对您有所帮助。

【问题讨论】：

对不起，我真的没有明白你的问题，你不能把边距去掉吗？
我想保留边距。这就是为什么我不能设置content div 的高度= 100%。关于这个问题。让我举例说明一下。假设wrapper div 的高度 = 200px，所以content div 的高度 = 200 - (10 + 20) = 170px。我可以通过 jquery 在页面加载时做到这一点，但我想通过纯 html/css 来实现
您是否尝试过浮动 div 以填充其父元素？
@oshikryu 你能说得更具体点吗？
类似 div.content{ float:left; }。如果您不指定宽度，那应该填充父类。然后你可以添加边距

标签： html css

【解决方案1】：

检查这个小提琴http://jsfiddle.net/sarfarazdesigner/T7D32/9/

更新小提琴http://jsfiddle.net/sarfarazdesigner/T7D32/13/

我对你的 css 代码做了一些小改动

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

.wrapper {
    background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    overflow: auto;
    padding:10px 0 20px 0;
}

.content {  
    margin:0 auto;
    width: 724px;
    border: black 1px solid;
    height:100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

如果您有任何问题，请告诉我

【讨论】：

有一个问题。当您设置height: 100% 时，内容 div 会溢出，我不希望这种行为。我希望它适合父级而不溢出
@DoanCuong 因为您使用的是border，所以您可以使用border-box 属性，它会起作用

【解决方案2】：

这里是Solution。

HTML：

<body>
    <div class="wrapper">
        <div class="content">

        </div>
    </div>
</body>

CSS：

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

.wrapper {
    background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: auto;
}

.content {  
    margin: 10px auto 20px auto;
    width: 724px;
    border: black 1px solid;
    height:inherit;
    overflow:auto;
    background:blue;
    width:auto;
}

问题出在内容类中。如果希望内容 div 包裹 wrapper div 的高度，则必须指定 height:inherit;，它继承其父 div 的高度。

希望这会有所帮助。

【讨论】：

【解决方案3】：

像这样改变.content类css，你的问题就解决了。

.content {  
    margin: 10px auto 20px auto;
    width: 724px;
    border: black 1px solid;
     overflow: auto;
    height: 100%
}

【讨论】：