Html 从页边距溢出的Div内容

涉及的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;
}

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

所涉及的html是：

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

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

Dev



菜单项2

这里有一些段落

如下图所示，#contentdiv的内容从边缘溢出，看起来该div扩展到了新的领域（在#menudiv下）。我怎样才能阻止这种事情发生

在应用fauxserious建议的编辑之后，这就是结果（注意，我为#menudiv添加了一个边框以查看发生了什么）

---

菜单的高度没有填满整个主体的高度，因此允许内容落在其下方。如果在菜单周围添加边框，您将看到发生了什么。好消息是，这是一个简单的修复，因为您的菜单是一个百分比

#contentdiv{
    font-family:verdana;
    width:80%; 
}

---

菜单的高度并没有填满主体的整个高度，因此允许内容落在其下方。如果在菜单周围添加边框，您将看到发生了什么。好消息是，这是一个简单的修复，因为您的菜单是一个百分比

#contentdiv{
    font-family:verdana;
    width:80%; 
}

实现这一点的关键是使用流体布局。更改所有宽度、左/右填充和左/右边距以使用百分比应该可以做到这一点。此外，它们的总和应达到100%

删除此CSS 取代 您还需要将

float:right

添加到

#contentdiv

CSS中

实现这一点的关键是使用流体布局。更改所有宽度、左/右填充和左/右边距以使用百分比应该可以做到这一点。此外，它们的总和应达到100%

删除此CSS 取代

---

此外，您还需要将

float:right

添加到CSS中，以便

#contentdiv

我会将您的填充右边改为带有%的边距，而不是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;
}

---

检查一下

我会把你的填充改成一个带%的边距，而不是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;
}

---

查看

如果你要做这样的事情，最好的方法是使用一个带有左边框或填充的容器，菜单浮动在其中，然后所有其他内容都在菜单区域之外

大概是这样的：

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

我的菜单
所有其他内容都在这里。

---

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

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

大概是这样的：

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

我的菜单
所有其他内容都在这里。

---

它可能没有“响应性”，但如果你不在意，它总是有效的。

你可以尝试添加

溢出：自动到内容分区。因此，您不需要为内容指定固定宽度


#menudiv{
位置：相对位置；
宽度：20%；
右侧填充：3px；
垫底：0px；
浮动：左；
身高：100%；
字体系列：ubuntu；
字体大小：25px；
颜色：#404040；
}
#月经学家{
列表样式类型：方形；
列表样式位置：外部；
字体大小：16px；
}
#contentdiv{
字体系列：verdana；
溢出：自动；
}
p{
字体系列：verdana；
文本对齐：对齐；
文本缩进：20px；
字号：12号；
}

Dev



菜单项2

有些段落是这样写的：Lorem ipsum Door sit amet，Concertetur Adipising Elite。多洛丽丝·南，兼照明。Illo amet voluptates sunt inventore在similique准nisi实习。从公元前10年起，我们就开始用“不承认同一权利”来解释同一权利，这是对精英的尊重。我们的智慧是真实的，我们的生命是流动的！自由劳动和共和国精神自由

您可以尝试添加
溢出：自动到内容分区。因此，您不需要为内容指定固定宽度


#menudiv{
位置：相对位置；
宽度：20%；
右侧填充：3px；
垫底：0px；
浮动：左；
身高：100%；
字体系列：ubuntu；
字体大小：25px；
颜色：#404040；
}
#月经学家{
列表样式类型：方形；
列表样式位置：外部；
字体大小：16px；
}
#contentdiv{
字体系列：verdana；
溢出：自动；
}
p{
字体系列：verdana；
文本对齐：对齐；
文本缩进：20px；
字号：12号；
}

Dev



菜单项2

有些段落是这样写的：Lorem ipsum Door sit amet，Concertetur Adipising Elite。多洛丽丝·南，兼照明。Illo amet voluptates sunt inventore在similique准nisi实习。从公元前10年起，我们就开始用“不承认同一权利”来解释同一权利，这是对精英的尊重。我们的智慧是真实的，我们的生命是流动的！自由劳动和共和国精神自由

我会完全避免浮动并使用。这允许您定义导航宽度，并让内容填充剩余空间。您还可以在不破坏布局的情况下更改宽度（可能使用媒体查询）

使用
box size:border box
避免在计算中包含元素的填充


body*{box size:border box}/*制作包含在框尺寸中的填充物*/
#梅努迪夫{
位置：相对位置；
宽度：20%；
最小宽度：150px；/*可以添加最小宽度，以便在狭窄的视口中菜单不会变得太小*/
右侧填充：3px；
垫底：0px；
/*浮动：左；
高度：100%；<移除这些*/
显示：表格单元格；/*生成表格单元格*/
垂直对齐：顶部；/*将内容与顶部对齐*/
字体系列：ubuntu；
字体大小：25px；
颜色：#404040；
}
#月经学家{
列表样式类型：方形；
L