故障排除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; 
}

來源

2016-03-15 Andy Parker

的解釋問題，而不是給你的生活背景可能會讓你更好的迴應。我在第一段 –

中沒有看到任何暗示問題/問題的東西，我在這裏爲你@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/

來源

2016-03-15 16:48:57 Tish

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

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

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

來源

2016-03-15 16:48:35

爲什麼高度不工作，因爲它應該是因爲div的上方設置爲「浮動」。添加「清除：兩者;」到div.section7清除浮游物。

來源

2016-03-15 16:49:35 Bonzai

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

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

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

來源

2016-03-15 16:52:28 Hazonko

故障排除CSS佈局

回答

相關問題