故障排除CSS布局

问题描述：

我已经构建了一个模板来布局我打算完成的任务。一切似乎都与我从stackoverflow社区了解到的一致。故障排除CSS布局

但是，作为其自己的容器并具有“section7”作为另一个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; 
}

的解释问题，而不是给你的生活背景可能会让你更好的回应。我在第一段 –

中没有看到任何暗示问题/问题的东西，我在这里为你@andy-parker做了一个小提琴：https：//jsfiddle.net/2L55g0f9/ – Hazonko

答

需要清除浮动元素，以便下列元素正确对齐并且不会移动到已浮动的元素中。第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/

答

为了.section7已经为150px，高度增加display: inline-block;

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

硒e：https://jsfiddle.net/zvkxj6v8/

答

为什么高度不工作，因为它应该是因为div的上方设置为“浮动” 。添加“清除：两者;”到div.section7清除浮游物。

答

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

因为第5和6是浮动的，你没有看到部分7的高度我所做的就是clearfix它，你有你的身高:)

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

相关推荐