Question

我正在尝试为CSS中的电视监视器项目创建全屏布局，并且无论屏幕大小如何，布局都会动态地填充整个屏幕。

我的目标是让页面看起来像这样：

----------------------------
|          header          |
----------------------------
| l|                    |r |
| e|                    |i |
| f|                    |g |
| t|      content       |h |
|  |                    |t |
|  |                    |  |
|  |                    |  |
----------------------------
|           footer         |
----------------------------

到目前为止，我已经能够通过CSS中的百分比（包括页眉和页脚）完成大部分动态调整。但是，我无法将左侧，内容和右侧部分完全填满屏幕的中心区域。

从下面的代码中，红色div不应该是可见的，因为中心部分应该始终覆盖红色div的100％。我已经尝试将max-height / width设置为100％以及继承，这是行不通的。

我花了几个小时（prlly 10+）试图让这个布局工作，我没有在哪里。在这一点上，我只是改变CSS并移动代码，看看我是否可以碰巧让它工作。

为什么我不能正确填写这些部分？有人能指出我正确的方向吗？代码如下。

的index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <title></title>
    <link href="style.css" rel="stylesheet">
</head>

<body>

<div class="wrapper">

    <header class="header">
        <strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
    </header><!-- .header-->

    <aside class="left-sidebar">
        <strong>Left Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
    </aside><!-- .left-sidebar -->

    <aside class="right-sidebar">
        <strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
    </aside><!-- .right-sidebar -->

    <div class="container">
        <main class="content">
            <strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit. Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. 
        </main><!-- .content -->
    </div><!-- .container-->

</div><!-- .wrapper -->

<footer class="footer">
    <strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
</footer><!-- .footer -->

</body>
</html>

的style.css：

/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */

html {
    height: 100%;
    width: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}
body {
    font: 12px/18px Arial, sans-serif;
    height: 100%;
}
.wrapper {
    min-width: 100%;
    margin: 0 auto;
    min-height: 80%;
    background-color: red;
}


/* Header
-----------------------------------------------------------------------------*/
.header {
    height: 20%;
    background: #FFE680;
    padding: 10px 10px 10px 10px;
}


/* Middle
-----------------------------------------------------------------------------*/
.middle {
    width: 100%;
    height: auto;
    position: relative;
}
.middle:after {
    display: table;
    clear: both;
    content: '';
}
.container {
    width: auto;
    height: auto;
    float: inherit;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    background-color: grey;
}
.content {
    padding: 10px 10px 10px 10px;
    min-width: 100%;
    height: auto;
    min-height: 100%;
}


/* Left Sidebar
-----------------------------------------------------------------------------*/
.left-sidebar {
    float: left;
    width: 25%;
    min-height: 100%;
    max-height: 100%;
    position: relative;
    background: #B5E3FF;
    padding: 10px 10px 10px 10px;
    overflow: hidden;
}


/* Right Sidebar
-----------------------------------------------------------------------------*/
.right-sidebar {
    float: right;
    min-width: 25%;
    max-width: 25%;
    width: 25%;
    background: #FFACAA;
    height: 100%;
    padding: 10px 10px 10px 10px;
    overflow: hidden;
}


/* Footer
-----------------------------------------------------------------------------*/
.footer {
    width: 100%;
    height: 20%;
    background: #BFF08E;
}

Answer 1

你正在寻找的是将列设置为相同高度的技巧 - Chris Coiyer在这里对可能的技术进行了精彩的写作：http://css-tricks.com/fluid-width-equal-height-columns/

您想要考虑的几个问题：

您想支持旧版浏览器还是现代浏览器？如果您的答案是后者，我建议使用弹性框修复。
背景是纯色吗？如果是这种情况，你总是可以使用背景图片作弊，或者在背景中使用绝对定位的div。
标记中列的顺序是否可调？你的布局中有一边（asideLeft-asideRight-mainContent），它涉及将一个旁边的元素浮动到右边。你介意使用asideLeft-mainContent-asideRight布局吗？

我已经研究了一些解决方案，并认为一个真正的布局方法可能最适合您的需求。然而，它涉及使用非常大的底部填充，以及非常巨大的负底部边缘。

标记与您提供的相同，但我通过在原始CSS的底部添加覆盖来更改您的CSS。

.left-sidebar, .right-sidebar, .container {
    box-sizing: border-box;
    float: left;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
    .right-sidebar {
        float: right;
    }
.wrapper {
    overflow: hidden;
}

可以删除许多冗余的CSS属性：

如果您指定了高度，则可以省略最小和最大高度的声明。
padding: 10px 10px 10px 10px可以转换为速记padding: 10px

您可以转到此链接（http://www.diffchecker.com/fqfq45io）查看我对您的CSS所做的更改。

http://jsfiddle.net/teddyrised/DGcQs/

Answer 2

试试这个

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">    </script><![endif]-->
<title></title>
<link href="style.css" rel="stylesheet">
</head>

<body>

<div class="wrapper">

<header class="header">
    <strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
   </header><!-- .header-->

   <aside class="left-sidebar">
    <strong>Left Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
   </aside><!-- .left-sidebar -->

    <div class="container">
    <main class="content">
        <strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit. Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. 
    </main><!-- .content -->
    </div><!-- .container-->

    <aside class="right-sidebar">
    <strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
   </aside><!-- .right-sidebar -->



  </div><!-- .wrapper -->

  <footer class="footer">
  <strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
  </footer><!-- .footer -->

  </body>
  </html>

而css是

 .middle {
 width: 100%;
 height: auto;
 position: relative;
 }
.middle:after {
display: table;
clear: both;
content: '';
}
.container {
width: 50%;
height: auto;
float: inherit;
overflow: hidden;
margin-left: auto;
margin-right: auto;
background-color: grey;
float:left;
}
.content {
padding: 10px 10px 10px 10px;
min-width: 100%;
height: auto;
min-height: 100%;
}


/* Left Sidebar
-----------------------------------------------------------------------------*/
.left-sidebar {
float: left;
width: 25%;
min-height: 100%;
max-height: 100%;
position: relative;
background: #B5E3FF;
/* padding: 10px 10px 10px 10px;*/
overflow: hidden;
}


/* Right Sidebar
-----------------------------------------------------------------------------*/
.right-sidebar {
float: right;
width: 25%;
background: #FFACAA;
min-height: 100%;
max-height: 100%;
/*padding: 10px 10px 10px 10px;*/
overflow: hidden;
}


/* Footer
-----------------------------------------------------------------------------*/
.footer {
width: 100%;
height: 20%;
background: #BFF08E;
float:left;
}

强制div扩展到填充区域

2 个答案: