Question

这是我尝试制作的内容......

Instant

页眉和页脚部分似乎工作，div是我想要的地方。 middle_wrapper div扩展到/进入页脚div。它需要停在页脚div。导航和部分div的问题相同。当我将浏览器长度减少到小于＆＃39;部分＆＃39;长度，浏览器显示垂直滚动条而不是“＆＃39;部分＆＃39;和＆＃39; nav＆＃39;的div。

... HTML

<html>
<head>
    <meta charset="UTF-8">
    <title>Sample HTML5 Layout</title>
    <link href="div_style_2.css" rel="stylesheet" />
</head>
<body>

<div id="form_wrapper">

  <div id="header_wrapper">
    <div id="header">
     <h1>Header</h1>
    </div>
  </div>

  <div id="middle_wrapper">

    <div id="nav">
     Nav 1<br>
     Nav 2<br>
     Nav 3<br>
    </div>

    <div id="section">
     <h1>Section</h1>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
     <p>Some content...</p>
    </div>

  </div> 

  <div id="footer_wrapper">
   <div id="footer_body">
    Footer
   </div>
  </div>

</div> <!-- form_wrapper -->

</body>
</html>

... CSS

* { margin: 0; }

html, body { height: 100%; }

#form_wrapper {
    width: 1200px;
    min-width: 1200px;
    max-width: 1200px;
    margin-left:auto;
    margin-right:auto;

    position: relative;
    height: 100%;
    min-height: 100%;

    border: none;
    display: table;

}
#header_wrapper {
    height: 50px;
    width: 100%;
    display:table-row;

}
#header {
    height: 45px;
    background-color:black;
    color:white;
    text-align:center;
    padding-top: 5px;
}

#middle_wrapper {
    display:table-row;
    width: 100%;
    height: 100%;
    background-color:#abcdef;
}

#nav {
    background-color:#eeeeee;
    width: 165px;
    height: 100%;
    width: 165px;
    float: left;
    overflow-y: auto;

}
#section {
    background-color:#fedcba;
    height: 100%;
    margin-left: 165px;
    width: auto;
    overflow-y: auto;
}

多部分/ div响应式HTML / CSS表单

0 个答案: