Question

我目前正在使用100％高度构建网站的前端，因此网站的每个部分都占用了显示的视口。（该网站应该与使用此技术的其他网站类似，例如Square Cash。）

桌面网站看起来很好，但在使网站响应时，高度不会延伸到内容。使块在该部分上运行。这可能是因为高度设置为100％所以它停在那里。

第一个欢迎部分很好，但网站的第二部分包含4个框（部分标签），它们位于div标签内。我试图让盒子保持在容器内的响应。

HTML：

<div class="top-section">
<nav> 
 <div class="nav-logo"><img></div>
 <a href="#registerpage" class="button">Register</a>
</nav>      
   <div id="center-column">
     <h1>WELCOME</h1>
   </div>
   <div class="text-banner">      
     <h6></h6>
   </div>
</div>
<div class="bottom-section">
<div id="center-box">
    <section>
      <h6></h6><p></p>
    </section>
    <section>
      <h6></h6><p></p>
    </section>
    <section>
      <h6></h6><p></p>
    </section>
    <section>
      <h6></h6><p></p>
    </section>
 </div>
 </div>

CSS桌面：

   html, body{
   height:100%;
   margin: 0;
   padding: 0;
   }

   .top-section{
   height:100%;
   background-color: #3498DB;
   margin: 0;
   padding: 0;
   text-align: center;
   }

   #center-column {
   position: relative;
   margin: 0;
   margin-top: 10%;
   margin-bottom: 5em;
   padding: 0;
   }

   .bottom-section{
   height:100%;
   background-color: #9B59B6;
   margin: 0;}

   #center-box { 
    width: 960px;
    margin-left: auto;
    margin-right: auto;}

    section { 
    text-align: center;
    margin: 2%;
    float: left;
    background-color: #8E44AD;
    height: 300px;
    width: 400px;
    }

CSS MOBILE：

    html, body{
    height:100%;
    margin: 0;
    padding: 0;
    }


   .top-section{
   height:100%;
   background-color: #3498DB;
   margin: 0;
   padding: 0;
   text-align: center;
   }

   #center-column {
   position: relative;
   margin: 0;
   margin-top: 10%;
   margin-bottom: 5em;
   padding: 0;
   }

   .bottom-section{
    min-height:100%;
    background-color: #9B59B6;
    margin: 0;}

   #center-box { 
    width: 100%;
    margin-left: auto;
    margin-right: auto;}


    section { 
    text-align: center;
    margin: 0;
    float: left;
    background-color: #8E44AD;
    height: 12em;
    width: 90%;
     }

Answer 1

尝试使用总计100％或更低（包括边距等）的不同百分比

截面框在使用100％视口高度响应网站时转义Div标签

1 个答案: