如何通過CSS擴展內容？

我試過不同的解決方案，我在這裏找到了stackoverflow，但他們沒有工作。如果頁面爲空，我真的不知道如何擴展「部分」的內容。如何通過CSS擴展內容？

HTML

<body> 
     <header> 
      <ul class="menu"> 
       <li><a href="">Option 1</a></li> 
       <li><a href="">Option 2</a></li> 
       <li><a href="">Option 3</a></li> 
       <li><a href="">Option 4</a></li> 
       <li id="home" class="active"><a href="">Home</a></li> 
      </ul> 
     </header> 
     <section> 
      <h1 id="titolo">Main Title<br>Sub title</h1> 
      <p>A lot of Content</p> 
     </section> 
     <footer> 
     <p>Name Surname <br> <a href="mailto:[email protected]">[email protected]</a></p> 
     </footer> 
    </body> 
</html>

CSS

section {  
    margin: 44px 10%; 
    background-color:#ffffff; 
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.40); 
    padding:1px; 
}

來源

2016-04-24 reuseman

另一種解決方案是使用Flexbox的這是更簡單（至少對我來說）

我修改你的代碼在這JSFiddle

HTML：

<header> 
    <ul class="menu"> 
       <li><a href="">Option 1</a></li> 
       <li><a href="">Option 2</a></li> 
       <li><a href="">Option 3</a></li> 
       <li><a href="">Option 4</a></li> 
       <li id="home" class="active"><a href="">Home</a></li> 
    </ul> 
</header> 

<div class="wrapper"> 

    <section class="content"> 
    <h1 id="titolo">Main Title<br>Sub title</h1> 
    <p>A lot of Content</p> 
    </section> 
</div> <!-- /wrapper --> 

<footer> 
    <p>Name Surname <br> <a href="mailto:[email protected]">[email protected]</a></p> 
    </footer>

CSS：

html {display: flex; flex-direction: column;} /* IE fix */ 
body { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; /* (compatible IE9+) */ 
} 
.wrapper { 
    display: block; /* IE fix */ 
    flex: 1 1 auto; 
    display: flex; 
    flex-direction: row; 
} 
nav { 
    width: 15em; 
} 
.content { 
    display: block; /* IE fix */ 
    flex: 1; 
} 


body { 
    margin: 0; 
    background: #fff; 
    font-family: "Century Gothic", helvetica, arial, sans-serif; 
    font-size: 1.1em; 
} 

footer { 
    height: 40px; 
    width: 100%; 
    text-align: center; 
    background-color:#303030; 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.99); 
    color:white; 
} 

section {      /*That's the part that i want to expand till the footer*/ 
    margin: 44px 10%; 
    background-color:#ffffff; 
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.40); 
    padding:1px; 
    overflow:hidden; 

} 


ul.menu { 
    display:flex; 
    font-size:110%; 
    width:100%; 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.99); 
    list-style-type:none; 
    background-color:#303030; 
    color:white; 
} 

li a{ 
    float:left; 
    padding: 13px 16px; 
    text-align: center; 
} 

li a:hover { 
    background-color:#ff5722; 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.80); 
} 

#home { 
    position: absolute; 
    top:20px; 
    right:5px; 
    } 

li.active { 
    background-color:#ff5722; 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.99); 
} 

li a { 
    display:block; 
    color:white; 
} 


#titolo { 
    border: 2px dashed #ff5722; 
    border-radius:5px; 
    margin:40px 40px 0px 40px; 
    padding: 15px 0px; 
    text-align:center; 
    font-size:2em; 
    font-weight: bold; 
} 

a { 
    color:#ff5722; 
    text-decoration:none; 
} 

span{ 
    color:#ff5722; 
} 

p { 
    margin:0px 40px; 
    display:block; 
    }

您可以瞭解Flexbox的在here

來源

2016-04-24 16:57:19 SRD

我發現了一個錯誤，我猜想，我不明白爲什麼如果我把一個圖像，該部分的內容熄滅，並毀了一切https://jsfiddle.net/L2jfss67/2/ – reuseman

嗯我看不出你的問題是什麼..你的形象被放置在你的部分，並在你的jsfiddle，一切似乎正確的地方。告訴我更多關於它的信息 – SRD

好吧，對不起，現在我已經看到，沒有足夠的文字來查看問題。 https://jsfiddle.net/L2jfss67/3/ http://imgur.com/QH0AdSG – reuseman

你可以試試height屬性。

section {  
margin: 44px 10%; 
background-color:#ffffff; 
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.40); 
padding:1px; 
height: auto; 
/* or you can type manually*/ 
height: 200px (or any amount); 
}

來源

2016-04-24 15:01:18 KillGeek

我已經試過了'高度：auto'但它不」噸工作，而如果我使用'高度：500px'它的工作。但問題是，頁面的佈局將在另一臺電腦上被破壞 – reuseman

我不知道這是否是你到底想要什麼，但試試這個：

html,body{ 
    height:100%; 
}

，並添加到您的節標籤：

section{ 
    height:100%; 
}

來源

2016-04-24 15:10:55 SRD

好吧，以這種方式，該部分已擴大，但太多了。事實上，它繼續在頁腳下。我剛剛嘗試過'高度：calc（100％ - 40px）'部分，以減少頁面，但它不起作用。 – reuseman

好吧，理解，我發佈了一個新的基於flexbox的答案，請查看！ – SRD

如何通過CSS擴展內容？

回答

相關問題