关闭div与CSS之间的差距

Question

我想将breadcrumb div加入到标题和左侧栏div中，附上image。

而且我想让内容div覆盖整个页面 - 目前它只覆盖内容div的3/4。 （我不能previous answers或谷歌搜索实现这个...）

HTML代码：

<div> <!-- container --> 

      <div id="header"> 
       <h1 align="center">Dashboard</h1> 
      </div> 

      <div id="nav"> 
       Networks<br> 
       Data Management<br> 
       Assets<br> 
      </div> 

      <div id="section"> 
      <div id="content-header"> 
       <h6 align="left">Breadcrumb</h6> 
      </div> 
      <h2>London</h2> 
      <p> 
       London is the capital city of England. It is the most populous city in the United       Kingdom, 
     with a metropolitan area of over 13 million inhabitants. 
      </p> 
      <p> 
     Standing on the River Thames, London has been a major settlement for two millennia, 
     its history going back to its founding by the Romans, who named it Londinium. 
      </p> 

    </div> 

</div> <!-- /container --> 

CSS代码：

#header { 
     background-color:#fecb00; 
     color:white; 
     text-align:center; 
     padding:5px; 
     } 
    #nav { 
     line-height:30px; 
     background-color:#002244; 
     color:white; 
     height:819px; 
     width:200px; 
     float:left; 
     padding:5px; 
    } 
    #section { 
     min-height: 100%; 
     width: auto; 
     float:left; 
     padding:10px;   
    } 

    #content-header { 
     background-color:#747678; 
     color:white; 
     text-align:center; 
     padding:5px; 
    } 

Answer 1

我放在你的#content-header以外的#section DIV和似乎解决了这个问题

jsfiddle

发生此问题的原因是您的#section div具有10像素的填充，导致您的面包屑移动。

Answer 2

这是你想要的吗？

我掏出填充，增加了宽度

#header { 
 
     background-color:#fecb00; 
 
     color:white; 
 
     text-align:center; 
 
     padding:5px; 
 
     } 
 
    #nav { 
 
     line-height:30px; 
 
     background-color:#002244; 
 
     color:white; 
 
     height:819px; 
 
     width:200px; 
 
     float:left; 
 
     padding:5px; 
 
    } 
 
    #section { 
 
     min-height: 100%; 
 
     width: 84%; 
 
     float:left; 
 
     /*padding:10px; */  
 
    } 
 

 
    #content-header { 
 
     background-color:#747678; 
 
     color:white; 
 
     text-align:center; 
 
     padding:5px; 
 
    }

<div> <!-- container --> 
 

 
      <div id="header"> 
 
       <h1 align="center">Dashboard</h1> 
 
      </div> 
 

 
      <div id="nav"> 
 
       Networks<br> 
 
       Data Management<br> 
 
       Assets<br> 
 
      </div> 
 

 
      <div id="section"> 
 
      <div id="content-header"> 
 
       <h6 align="left">Breadcrumb</h6> 
 
      </div> 
 
      <h2>London</h2> 
 
      <p> 
 
       London is the capital city of England. It is the most populous city in the United       Kingdom, 
 
     with a metropolitan area of over 13 million inhabitants. 
 
      </p> 
 
      <p> 
 
     Standing on the River Thames, London has been a major settlement for two millennia, 
 
     its history going back to its founding by the Romans, who named it Londinium. 
 
      </p> 
 

 
    </div> 
 

 
</div> <!-- /container -->

Answer 3

解决办法很简单：

你不能有width:auto这里

#section { 
min-height: 100%; 
width: auto; 
float:left; 
padding:10px;   
} 

所以改变它为af ixed width或% width，如下所示：

#section { 
    min-height: 100%; 
    width: 71%; /* adjust the width according to your needs */ 
    float:left; 
    padding:10px;   
}