Question

看一下我的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的高度取决于用户的屏幕分辨率。

SOLVE

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

Answer 1

这是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包装包装div的高度，必须指定一个继承其父div高度的height:inherit;。

希望这有帮助。

Answer 2

检查这个小提琴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+ */
}

如果你有任何问题，它会工作让我知道

Answer 3

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

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

Div高度填充容器有边距

3 个答案: