在＆＃34;〒＆＃34;中显示div

Question

我需要显示页面的main部分，以覆盖屏幕的其余部分而不显示标题。

L和R部分应为页面宽度的50％（具有可能的填充），以及main高度的100％（即其余部分）屏幕）

+-----------------------+
|         header        |
+-----------------------+
|           |           |
|     L     |    R      |  } main
|           |           |
+-----------------------+
|        footer         |
+-----------------------+

这是我的代码jsfiddle：

＆＃13;

＆＃13;

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
header {
    background-color: orange;
    height: 50px;
    width: 100%;
}
main {
    background-color: green;
    height: 100%;
    margin:0;
    padding: 10px;
    /* changeable */
    box-sizing:border-box;
    background-clip: content-box;
}

main div {        
        padding: 10px;
        height: 100%;
        background-clip: inherit;
        /* changeable */
        width:30%; /* to set=50% */
        float: left;
    }
main .left {
        background-color: yellow;
    }
main .right {
        background-color: red;
    }

＆＃13;

<header>This is the header content.</header>
<main>
    <div class="left">50% width, 100% main height left</div>
    <div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>

＆＃13;

＆＃13;

＆＃13;

PS。
我需要兼容＆＃34; IE9 +＆＃34; （所以flexbox不兼容）

第一页加载的结果应如下图所示：

Answer 1

由于标题的高度已知，您可以使用绝对定位

＆＃13;

＆＃13;

header, main, footer {
  position: absolute;
  left: 0;
  right: 0;
}
header {
  top: 0;
  height: 50px;
  background-color: orange;
}
main {
  top: 50px;
  bottom: 0;
}
.left, .right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}
.left {
  left: 0;
  background-color: yellow;
}
.right {
  right: 0;
  background-color: red;
}
footer {
  top: 100%;
}

＆＃13;

<header>This is the header content.</header>
<main>
  <div class="left">50% width, 100% main height left</div>
  <div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您遇到的问题是主容器中div的填充。稍微重新考虑一下你的css我已经设法让它不能超过一圈。

这是演示：http://jsfiddle.net/h1tz5h8q/2/

main {
    background-color: green;
    height: 100%;
    margin:0;
    padding: 1%;
}
main div {        
    padding: 0px;
    height: 100%;
    background-clip: inherit;
    width:49%;
    float: left;
}
main .left {
    background-color: yellow;
}
main .right {
    background-color: red;
    float: right;
}

Answer 3

纯CSS解决方案，完全响应，无需修复任何高度（页眉或页脚）

这里是Demo

唯一缩小尺寸的是，您必须按特定顺序构建HTML。 （页脚在列之前）

<div class="Container">
    <div class="Header">
        <h1>Header</h1>
    </div>
    <div class="HeightTaker">
        <div class="Wrapper Container Inverse">
            <div>
                <div class="Footer">
                </div>
            </div>
            <div class="HeightTaker">
                <div class="Wrapper Content">
                    <div class="Table">
                        <div class="Column C1">
                        </div>
                        <div class="Column C2">
                        </div>
                        <div class="Column C3">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

列宽可以是固定的，也可以不是..对你来说。

P.S： 这是我的一个老答案，其中有3列，但您可以将其更改为2而没有任何问题。

Answer 4

将左侧和右侧部分添加到包装器div以处理50％宽度和填充。

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
header {
    background-color: orange;
    height: 50px;
    width: 100%;
}
main {
    background-color: green;
    height: 100%;
    margin:0;
    padding: 10px;
    /* changeable */
    box-sizing:border-box;
    background-clip: content-box;
}

main .left, main .right {        
    padding: 0 10px;
    height: 100%;
    background-clip: inherit;
}
main .left {
    background-color: yellow;
}
main .right {
    background-color: red;
}

.wrapper {
    width: 50%;
    float: left;
    height: 100%;
}

footer {
    display: block;
    margin-top: 10px;
}

<div class="wrapper">
    <div class="left">50% width, 100% main height left</div>
</div>
<div class="wrapper">
    <div class="right">50% width, 100% main height right</div>
</div>

Answer 5

请尝试这个：

Demo

Css代码：

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
header {
    background-color: orange;
    height: 50px;
    width: 100%;
}
main {
    background-color: green;
    height: 100%;
    margin:0;
    padding: 2%;
}
main div {        
    padding: 0px;
    height: 100%;
    background-clip: inherit;
    width:49%;
    float: left;
}
main .left {
    background-color: yellow;
}
main .right {
    background-color: red;
    float: right;
}

Answer 6

我要管理的一个不太优雅但功能性的例子是使用css height: calc(100% - 50px);函数作为主要元素：

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
header {
    background-color: orange;
    height: 50px;
    width: 100%;
}
main {
    background-color: green;
    height: calc(100% - 50px);
    width: 100%;
    margin: 0;
    float: left;
    padding: 5px;
    box-sizing:border-box;
    background-clip: content-box;
}
main div {        
    padding: 10px;
    height: 100%;
    background-clip: content-box;
    box-sizing:border-box;
    width:50%;
    float: left;
}
main .left {
    background-color: yellow;
}
main .right {
    background-color: red;    
}

<header>This is the header content.</header>
<main>
    <div class="left">50% width, 100% main height left</div>
    <div class="right">50% width, 100% main height right</div>
</main>
<footer>This is the footer content.</footer>

这是相应的JSFiddle。

缩小尺寸，是我

• 必须使用固定的标题高度;
• 必须使用两次此标题（我认为使用LESS文件而不是CSS文件解决此问题...）。