Div不是100％

-2

我已经看到了Stackoverflow上的类似问题，我试过他们的指示，但仍然没有区别。我已经完成了margin：0填充：我的代码也是0。Div不是100％

第一个div是侧栏，第二个div是内容（蓝色），右侧有空白区域。右侧的空间不是第三个div，它似乎只是空白区域。我不希望白色空间在那里。

这里是我的CSS/HTML：

#dashboard { 
 
     width: 100%; 
 
    } 
 
    
 
    #content { 
 
     float: right; 
 
     width: 80%; 
 
     overflow: hidden; 
 
     background: aqua; 
 
    } 
 
    
 
    #sidebar { 
 
     font-family: "Open Sans"; 
 
     font-size: 16px; 
 
     font-style: normal; 
 
     font-variant: normal; 
 
     font-weight: bolder; 
 
     line-height: 18px; 
 
     color: #c5cdd1; 
 
     text-decoration: none; 
 
     background-color: #14253f; 
 
     width: 220px; 
 
     height: 100%; 
 
     float: left; 
 
     width: 20%; 
 
     overflow: hidden; 
 
    }

<section id="dashboard"> 
 
    <div id="sidebar"> 
 
     <!-- Logo --> 
 
     <div id="logo"><img src="img/FDMxLogo.png" /></div> 
 

 
     <!-- Nav --> 
 
     <nav id="nav"> 
 
      <a class="mob-nav"> </a> 
 
      <ul> 
 
       <li id="m-item" class="current"> 
 
        <a href="#"><img src="img/ico_home.png" />DASHBOARD</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_report.png" />REPORTS</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_cust.png" />CUSTOMIZE</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_set.png" />SETTINGS</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_about" />ABOUT</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_con" />CONTACT</a> 
 
       </li> 
 

 
      </ul> 
 
     </nav> 
 
    </div> 
 
    <div id="content"> 
 
     <a href="create.php" class="add">Add Graph<br></a> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <?php echo $div;?> 
 

 
      <button style="margin-top:0em;width:100%; " type="submit" onClick="remove();">REMOVE</button> 
 
    </div> 
 
</section>

来源

2017-03-17 Ranj Salih

请提供[MCVE] – Turnip

安置自己的HTML和所有相关的CSS –

哪里是HTML结构？ –

-1

上＃内容的80％的宽度是搞乱起来，我认为。您还在#sidebar上使用了两次宽度

来源

2017-03-17 14:35:20

请务必为上述评论保留任何“猜测”。如果您坚信这是个问题，请考虑编辑您的问题，或许包含演示或更多信息。就目前而言，你的问题既过于简单又过于简单。 – Santi

我想要divs并排。同样，当我删除它时，它的宽度也是相同的，就在侧栏下方。 –

以下是您可以尝试的简单编辑。

我加

display:table;

到#dashboard资讯。我从#content和#sidebar删除了浮动。我也从两者中删除thie宽度百分比，但留下宽度：220px。在侧边栏中。

然后我说

display:table-cell;

既＃内容和#sidebar。

小提琴：https://jsfiddle.net/r5jcv2yu/

来源

2017-03-17 14:47:00 Sicae

请注意，这适用于您的简单示例，它使侧栏和内容保持相同的高度。不知道这是你想要的。不是我通常的攻击计划。：P – Sicae

回答

相关问题