Question

我尝试过在stackoverflow上找到的不同解决方案，但它们并没有起作用。我真的不知道如何扩展＆＃34; Section＆＃34;如果页面是空的。

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:youremail@mail.com">youremail@mail.com</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;
}

Answer 1

你可以试试身高属性。

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);
}

Answer 2

我不知道这是不是你想要的，但试试这个：

html,body{
  height:100%;
}

并添加到您的部分代码：

section{
   height:100%;
}

Answer 3

另一种解决方案是使用更简单的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:youremail@mail.com">youremail@mail.com</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;
    }

您可以在here

中了解Flexbox

我如何通过CSS扩展内容？

3 个答案: