0

看看我的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 溢出。这是我的jsfiddle

编辑

澄清问题的示例：

假设div.wrapper高度 = 200px

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

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

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

解决

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

4

3 回答 3

2

这是解决方案。

的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 的高度，height:inherit;则必须指定继承其父 div 高度的 a。

希望这可以帮助。

于 2013-05-16T04:54:41.787 回答
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+ */
}

如果您有任何问题，它会起作用让我知道

于 2013-05-16T04:35:57.577 回答
1

像这样更改 .content 类 css，您的问题将得到解决。

.content {  
    margin: 10px auto 20px auto;
    width: 724px;
    border: black 1px solid;
     overflow: auto;
    height: 100%
}
于 2013-05-16T04:41:04.360 回答