如何通过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; 
}

答

另一种解决方案是使用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

我发现了一个错误，我猜想，我不明白为什么如果我把一个图像，该部分的内容熄灭，并毁了一切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); 
}

我已经试过了'高度：auto'但它不”吨工作，而如果我使用'高度：500px'它的工作。但问题是，页面的布局将在另一台电脑上被破坏 – reuseman

答

我不知道这是否是你到底想要什么，但试试这个：

html,body{ 
    height:100%; 
}

，并添加到您的节标签：

section{ 
    height:100%; 
}

好吧，以这种方式，该部分已扩大，但太多了。事实上，它继续在页脚下。我刚刚尝试过'高度：calc（100％ - 40px）'部分，以减少页面，但它不起作用。 – reuseman

好吧，理解，我发布了一个新的基于flexbox的答案，请查看！ – SRD

如何通过CSS扩展内容？

相关推荐