Question

我已经构建了一个模板来布局我打算完成的任务。一切似乎都与我从stackoverflow社区学到的东西很好地配合。

然而，Footer是它自己的容器并且具有＆＃34; section7＆＃34;因为另一个DIV没有显示为150像素的高度。基本上所有部分都有固定高度，但第5节和第6节除外，这些部分必须根据浏览器窗口大小或放置在该部分内的内容进行缩放。因此，如果内容稀疏，我只希望高度为剩余浏览器空间的100％，以便网站从上到下。但是，如果内容很长，我希望中间部分能够根据需要进行调整和继续。希望我有意义。

挑战在于我不知道我哪里错了，因此不知道如何在搜索功能中提出问题，因为我觉得对于有经验的人来说这是一件容易的事。任何帮助表示赞赏。

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample Website</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<div class="container">

    <div class="header">

        <div class="section1">section 1</div>
        <div class="section2">section 2</div>
        <div class="section3">section 3</div>
        <div class="section4">section 4</div>  

    </div>

    <div class="middle">

        <div class="section5">section 5</div>
        <div class="section6">section 6</div> 

    </div>

    <div class="footer">

        <div class="section7">section 7</div>

    </div>

</div>

</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding: 0px;
    background-color:#DBDBDB
}

div.container   {
    width: 1200px;
    background-color:#FFFFFF;
    margin-left:auto;
    margin-right:auto;      
}

div.header  {
    height: 100px;      
}

div.middle  {
    min-height: 400;        
}

div.footer  {
    height: 150px;
}

div.section1 {
    background-color:#FF0004;
    height: 100px;
    width: 275px;
    float:left;
    position:relative;
}

div.section2 {
    background-color:#FFA600;
    height: 100px;
    width: 100px;
    float:left;
    position:relative;
}

div.section3 {
    background-color:#00C304;
    height: 50px;
}

div.section4 {
    background-color:#DFDD00;
    height: 50px;
}

div.section5 {
    background-color:#0A00FF;
    width: 275px;
    height: 400px;
    float:left;
    height: 100vh;
}

div.section6 {
    background-color:#CB05B1;
    width: 925px;
    height: 400px;
    float:right;
    height: 100vh;
}

div.section7 {
    background-color:#9E9E9E;
    height: 150px;
}

Answer 1

要使.section7的高度为150px，请添加display: inline-block;

div.section7 {
    background-color: #9E9E9E;
    height: 150px;
    display: inline-block;
}

请参阅：https://jsfiddle.net/zvkxj6v8/

Answer 2

需要清除浮动元素，以便元素正确对齐并且不会移动到已浮动的元素中。第5节和第6节。

将以下类定义添加到样式表

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}

将以下标记<div class="middle">更改为<div class="middle clearfix">

HTML5还包含<header>和<footer>元素，以及<article>标记，以使文档语言更具语义性。因此，对于HTML5，您可以使用

<header>

    <div class="section1">section 1</div>
    <div class="section2">section 2</div>
    <div class="section3">section 3</div>
    <div class="section4">section 4</div>  

</header>

和

<footer>

    <div class="section7">section 7</div>

</footer>

https://jsfiddle.net/raythcael/s49o4rjz/2/

Answer 3

高度不能正常工作的原因是因为它上面的Div被设置为“浮动”。添加“clear：both;”到div.section7清除浮子。

Answer 4

https://jsfiddle.net/2L55g0f9/1/

因为第5和第6部分是浮动的，你没有看到第7部分的高度。我所做的只是清除它，你得到了你的身高：）

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}

CSS布局故障排除

4 个答案: