从边距溢出的Div内容

Question

涉及的CSS是：

#menudiv{
    position:relative;
    width:20%;
    padding-right:3px;
    padding-bottom:0px;
    float:left;
    height:100%;
    font-family:ubuntu;
    font-size:25px;
    color:#404040;
}

#menulist{
    list-style-type:square;
    list-style-position:outside;
    font-size:16px;
}

#contentdiv{
    font-family:verdana;
}

p{
    font-family:verdana;
    text-align:justify;
    text-indent:20px;
    font-size:12pt;
}

，涉及的HTML是：

<div id="menudiv">
    <img class="titleico" src="../images/code.png" /> &nbsp; &nbsp; Dev<br />
    <ul id="menulist">
        <li><a href="yo">Menu item 1</a></li>
        <li>Menu item 2</li>
    </ul>
</div>

<div id="contentdiv">
   <p>Some paragraphs go here</p>
</div>

<!-- the last 3 items belong to footer div which has no style-->

正如您在下面的图片中看到的那样，＃contentdiv的内容从它们的边缘溢出，看起来div扩展到新的区域（在#menudiv下）。我怎样才能阻止这种情况发生？

应用fauxserious建议的编辑之后，这就是结果（注意我为#menudiv添加了一个边框以查看正在进行的操作）

Answer 1

如果要做类似的事情，最好的方法就是让一个容器有左边距或填充菜单浮动，然后所有其他内容都在菜单区域之外。

这样的事情：

<div class="container" style="padding-left: 150px;">
    <div class="menu" style="margin-left:-150px">My Menu</div>
    <div class="content">
        All the other content goes here.
    </div>
</div>

它可能不是“响应”但如果你不在乎它总是有效。

Answer 2

菜单的高度不会填满身体的整个高度，因此允许内容低于它。如果您在菜单周围添加了边框，则会看到发生了什么。好消息是，这是一个简单的解决方法，因为您的菜单是一个百分比。

insertable=false,updatable=false 

Answer 3

JSFiddle

获得此功能的关键是使用流畅的布局。更改所有宽度，左/右边距和左/右边距以使用百分比应该可以解决问题。此外，他们应该加起来100％。

删除此CSS

width:20%;
padding-right:3px;

替换为

width: 19%;
padding-right: 1%;

此外，您需要将float: right添加到#contentdiv

的CSS中

Answer 4

我会将您的padding-right更改为带有％而不是px值的边距。然后浮动你的内容div并给它一个宽度。

#menudiv{
    position:relative;
    width:20%;
    margin-right:5%;
    padding-bottom:0px;
    float:left;
    height:100%;
    font-family:ubuntu;
    font-size:25px;
    color:#404040;
}

#contentdiv{
    font-family:verdana;
    width:75%;
    float:left;
}

查看jsfiddle

Answer 5

我会完全避免花车并使用CSS table layout。这允许您定义导航宽度并使内容填充空间的剩余部分。您也可以在不破坏布局的情况下更改宽度（可能使用媒体查询）。

使用box-sizing:border-box以避免在计算中包含元素的填充。

body * {box-sizing:border-box} /* make paddings INCLUDED in the box sizing */
#menudiv{
    position:relative;
    width:20%;
    min-width:150px; /* maybe add a minimum width so that the menu doesnt get too small on narrow viewports */
    padding-right:3px;
    padding-bottom:0px;
    /*float:left;
    height:100%; < remove these */
    display:table-cell; /* make table-cell */
    vertical-align:top; /* align content to top */
    font-family:ubuntu;
    font-size:25px;
    color:#404040;
}

#menulist{
    list-style-type:square;
    list-style-position:outside;
    font-size:16px;
}

#contentdiv{
    font-family:verdana;  
    display:table-cell; /* make table-cell */
    vertical-align:top; /* align content to top */  
}

p{
    font-family:verdana;
    text-align:justify;
    text-indent:20px;
    font-size:12pt;
}

<div id="menudiv">
    <img class="titleico" src="../images/code.png" /> &nbsp; &nbsp; Dev<br />
    <ul id="menulist">
        <li><a href="yo">Menu item 1</a></li>
        <li>Menu item 2</li>
    </ul>
</div><!-- 
No whitespace here. it can cause problems if you use inline-block
--><div id="contentdiv">
   <p>Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here</p>
<p>Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here Some paragraphs go here</p>
</div>

Answer 6

您可以尝试将overflow:auto;添加到内容div中。所以你不需要为内容指定一个固定的宽度。

＆＃13;

＆＃13;

#menudiv{
position:relative;
width:20%;
padding-right:3px;
padding-bottom:0px;
float:left;
height:100%;
font-family:ubuntu;
font-size:25px;
color:#404040;
}

#menulist{
list-style-type:square;
list-style-position:outside;
font-size:16px;
}

#contentdiv{
font-family:verdana;
overflow: auto;
}

p{
font-family:verdana;
text-align:justify;
text-indent:20px;
font-size:12pt;
}

＆＃13;

<div id="menudiv">
<img class="titleico" src="../images/code.png" /> &nbsp; &nbsp; Dev<br />
<ul id="menulist">
    <li><a href="yo">Menu item 1</a></li>
    <li>Menu item 2</li>
</ul>
</div>

<div id="contentdiv">
   <p>Some paragraphs go here Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores nam, cum illum. Illo amet voluptates sunt inventore est exercitationem at similique quasi nisi. Ad, laboriosam dicta nulla ipsum consequuntur illo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente accusamus ut odio maxime hic voluptatem fugit quibusdam veritatis, maiores recusandae aliquid! Asperiores deleniti harum recusandae iusto, libero laboriosam praesentium repudiandae..</p>
</div>

＆＃13;

＆＃13;

＆＃13;