Question

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

而且我想让内容div覆盖整个页面 - 此刻它只覆盖内容div的3/4。（我无法通过previous answers或Google搜索来实现这一目标......）

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

这是你想要的吗？

我拿出了填充物并增加了宽度

＆＃13;

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

＆＃13;

 <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 -->

＆＃13;

Answer 3

解决方案很简单：

你不能在这里width:auto

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

所以更改为固定width或% width，如下所示：

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

用CSS填补div之间的空白

3 个答案: