Question

我的问题是当我调整窗口大小（较小）我的一个div只是通过我的导航栏...这很烦人，但我相信有一个简单的方法来解决它。我可以给你代码，但是应该在你的编辑器程序中测试它 - 然后调整大小，你会明白我的意思。

HTML CODE HERE：

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="WorkFieldStartpage.css"/>


 </head>
  <body>
    <div id="upperblock">


     </div>

  <div class="topbar"></div>  



  <div id="pageContainer">

   <div id="pageContainer2">


            <div>
                <div id="leftnavigation">
                    <ul>
                    <li> <h4> Navigation </h4> </li>    
                    <li>Test text</li>
                    <li>Test text</li>
                    <li>Test text</li>

                    </ul>


                    </div>
                <div id="mainContainer">

                    <div id="newsfeed"></div>



                </div>

            </div>
       </div>
      </div>     

      </body>
      </html>

CSS CODE HERE：

 body {
 color: #333;
 line-height: 1.28;
 text-align: left;
 direction: ltr;

 }

 div {
 display: block;   



 }



 .topbar {
 font-family: sans-serif;
 font-size:12px;
 font-weight: bold;
 background-color: #11BD83;
 height: px;
 width: 100%;
 position:fixed;
 left: 0px;
 top: 0px;

 }


 #pageContainer {
 margin: 0 auto;
 position: relative;
  zoom: 1;
  min-height: 600px;
   }

  #pageContainer2 {
  margin: 0;
  outline: none;
  padding: 0;
  width: auto;



  }

  ul {
  list-style-type: none;
  }

  h4 {
  text-decoration:underline;



  }





 #mainContainer {
 display: block;
 width: 620px;    
 border-right: 1px solid #ccc;
 border-left: 1px solid #ccc;
 min-height: 800px;
 margin-left: auto ;
 margin-right: auto ;
 margin-top: 58px;   
 }

 #leftnavigation {
 float: left;
 height: 300px;
 width: 120.5px;
 text-align: left;
 font-family: sans-serif;
 font-size: 15px;
 padding-right: 30px;
 display:block;




 }

Answer 1

快速浏览一下你的CSS我可以看到.topbar课程中你有height: px;这意味着你没有为该容器指定高度。如果您将高度设置为小于58px的任何数字（根据我的测试），容器不应溢出到您的灰色垂直线。

Answer 2

normalize.css将整理任何可能导致问题的浏览器默认边距。

调整窗口大小的问题

2 个答案: