Question

为了解释我正在寻找的东西，我已经做了一个jsfiddle来说明它。这意味着我有一个解决方案，但这不是代码审查问题。我已经查看了自己的代码，发现我不喜欢它。所以它仅用于说明目的，用更好的解决方案来展示我想要替换的东西。这个包含太多嵌套的div用于我的口味，以及一些JS / jQuery;如果可能的话，我更喜欢纯CSS解决方案。

基本要点是：

1）即使视口大小已更改，body / main包装也应始终具有高度100%（调整小提琴的窗口以查看会发生什么）

2） div#content中带有边框的两个div，即#nav和#article，也应该具有高度100%（使用padding / margin / border-spacing）

3） #nav内灰色区域的高度应始终为100%（再次使用margin / padding小提琴），无论它包含多少文字/其他东西。如果内容不适合屏幕，则应显示垂直滚动条，背景颜色应向下延伸到可滚动区域内的内容，并具有与之前相同的边距/填充。

4）带绿色图像的右侧区域的高度也应为100%，图像的大小应根据容器的高度调整（最高为图片的完整尺寸;之后应该有空白空间，但#nav和#article的底部边框仍然应该在屏幕底部水平同步。）

任何想法（最好不加载其他框架，如bootstrap或使用CSS flex或其他支持不当的技术）？

这是 jsfiddle

代码是：

HTML

<div id="wrapper-block">
    <div id="wrapper">
        <div id="header">
           Banner and stuff
        </div>
        <div id="content">
        <div id="nav">
            <div id="inner-nav">
                <div id="v">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper bibendum tortor, a euismod diam laoreet sed. Nunc massa augue, aliquam convallis erat id, rhoncus placerat lacus. Nullam tincidunt vulputate lacus, sit amet ullamcorper tellus egestas vel. Duis tincidunt faucibus erat et eleifend. In hac habitasse platea dictumst. In varius tincidunt augue ut ullamcorper. Quisque vestibulum sit amet orci in ullamcorper. Integer at erat et diam lacinia volutpat vitae sed purus. Ut rutrum erat nunc, a adipiscing purus bibendum ac.</div>
                </div>
            </div>
            <div id="article">
                <div id="inner-art">
                    <img id="pic" src="http://i58.tinypic.com/30ijbc3.jpg" />
                </div>
            </div>
        </div>
    </div>
</div>

CSS

* {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    outline: 0;
}
html,body,caption,div,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,li,ol,ul,p,table,tr,th,td {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
body.js {
    overflow: hidden;
}
#wrapper-block {
    max-width: 842px;
    margin: 0 auto;
    width: 100%;
}
#wrapper {
    background-color: #FFFFFF;
    width: 100%;
    box-shadow: 0 0.0625em 0.375em 0.0625em #777777;
    padding: 0 0.5em 0.5em;
    display: table;
    border-collapse: separate;
    border-spacing: 1em;
    padding: 0;
}
#content {
    display: table-row;
    border-spacing: 0;
    width: 100%;
}
#nav {
    width: 36%;
    height: 100%;
    float: left;
    margin: 0;
}
#wrapper-block, #wrapper, #content {
    height: 100%;
}
.js #wrapper {
    visibility: hidden;
}
#nav {
    border: 1px solid #000000;
    overflow: auto;
    font-size: 0.8125em;
    margin-bottom: -1px;
}
#article {
    width: 62%;
    height: 100%;
    float: right;
    border: 1px solid #000000;
    background-color: #FFFFFF;
}
#inner-nav {
    border: 1em solid #FFFFFF;
    height: 100%;
    background-color: #E6E6DC;
}
#v {
    background-color: #E6E6DC;
    margin-bottom: 1em;
    padding: 0.75em;
}
#inner-art {
    padding: 0.75em;
    height: 100%;
}
#pic {
    max-height: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

JS / jQuery的

var cont = $('#content').height(),
    wrap = $('#wrapper').height(),
    win = $(window).height(),
    head = $('#header').height(),
    twoems = (wrap - head - cont);

$('#nav, #article').height(win - twoems - head - 2);

$('#wrapper').css('visibility','visible');

$(window).resize(function() {
    var newWin = $(window).height();
        if($('#wrapper').height() > newWin) {
            $('#nav, #article').height(newWin - twoems - head);
        } else {
            $('#nav, #article').height($('#content').height()-2);
        }
});

Answer 1

根据OP comment：

支持IE8-是不必要的

因此，作为纯CSS解决方案，您可以使用calc()表达式来正确计算和指定元素的height。

您需要做的是：

在height

#header

使用CSS height函数计算#content元素的calc()。

你最终会：

<强> EXAMPLE HERE

#header {
    height: 2.5em;
}

#content {
    width: 100%;
    height: calc(100% - 2.5em);
}

您可能还需要考虑使用-webkit-和-moz-前缀to support旧版本的基于Webkit的Web浏览器和Mozilla Firefox。

值得注意的是calc() is supported in IE9+。

^{PS：我已经改进了HTML结构以及一些CSS声明来摆脱多余的东西。这里不需要使用CSS表。}

几个级别的高度100％

1 个答案: