Html 内容显示在100%高度之外

Html 内容显示在100%高度之外,html,css,height,Html,Css,Height,有人能解释为什么尽管我的主要内容和主要内容固定宽度的高度都设置为100%,但主要内容固定宽度内的子项为什么存在于其高度之外?设置高度:100%不应该导致它相对于放置在里面的物品增长吗 * { 保证金:0; 填充:0; } P { 字体系列:“源Sans-Pro”,无衬线; 字体大小:16px; 线高:19px; 颜色:#1e4164; 利润率:10px 10px; } .内容部分标题 { 字体系列:“源Sans-Pro”,无衬线; 字体大小:12px; 线高:12px; 颜色:#5c; 利润率

有人能解释为什么尽管我的主要内容和主要内容固定宽度的高度都设置为100%,但主要内容固定宽度内的子项为什么存在于其高度之外?设置高度:100%不应该导致它相对于放置在里面的物品增长吗

*
{
保证金:0;
填充:0;
}
P
{
字体系列:“源Sans-Pro”,无衬线;
字体大小:16px;
线高:19px;
颜色:#1e4164;
利润率:10px 10px;
}
.内容部分标题
{
字体系列:“源Sans-Pro”,无衬线;
字体大小:12px;
线高:12px;
颜色:#5c;
利润率:10px 10px;
字号:600;
}
h1
{
字体大小:36px;
字体系列:“源Sans-Pro”,无衬线;
线高:122px;
颜色:#1e4164;
字号:800;
文本对齐:居中;
边缘顶部:25px;
边缘底部:70像素;
}
标题
{
高度:127px;
宽度:100%;
背景色:#569ABD;
盒影:rgba(80,80,80,0.7)1px 1px 2px 0px;
位置:相对位置;
z指数:2;
}
#标题固定宽度
{
宽度:1253px;
保证金:0自动;
}
#标题固定宽度img
{
利润上限:3倍;
}
#横幅
{
宽度:100%;
高度:772px;
显示:块;
}
#主要内容
{
显示:块;
宽度:100%;
身高:100%;
边框:1px纯黑;
}
#主内容固定宽度
{
宽度:1253px;
身高:100%;
保证金:0自动;
边框:1px实心#ccc;
}
.内容
{
高度:340px;
宽度:220px;
背景色:白色;
盒影:rgba(192,192,192,0.8)0px 10px 10px 0px;
浮动:左;
利润率:0px 0px 40px 30px;
}
.content#tempContentImage
{
高度:180像素;
宽度:222px;
}

OECTA模板
内部网

章节标题

Lorem ipsum dolor sit amet,奉献精英。奎斯,小白肠

章节标题

Lorem ipsum dolor sit amet,奉献精英。奎斯,小白肠

章节标题

Lorem ipsum dolor sit amet,奉献精英。奎斯,小白肠

章节标题

Lorem ipsum dolor sit amet,奉献精英。奎斯,小白肠

章节标题

Lorem ipsum dolor sit amet,奉献精英。奎斯,小白肠

章节标题

Lorem ipsum dolor sit amet,奉献精英。奎斯,小白肠

章节标题

Lorem ipsum dolor sit amet,奉献精英。奎斯,小白肠

章节标题

Lorem ipsum dolor sit amet,奉献精英。奎斯,小白肠


这是因为您的“内容”项目都是浮动的,所以浏览器会觉得“mainContent fixedWidth”容器中没有任何内容


将CSS规则
overflow:auto
添加到mainContent fixedWidth元素中,这应该可以解决问题。

这是因为您的“内容”项都是浮动的,所以浏览器会觉得“mainContent fixedWidth”容器中没有任何内容


将CSS规则
overflow:auto
添加到mainContent fixedWidth元素中,这应该可以解决问题。

这是您想要的吗?如果您不熟悉CSS,这里有不同的技巧:

  • 只有在层次结构链也以%定义时,以%表示的高度才能正常工作。通常,将“html”和“body”设置为100%高度可以做到这一点,就像这里一样,有时更复杂,需要包装器或JS
  • 浮动项在高度上有点脱离了内容流,如果我错了,请纠正我,它们“停留在文本行”中。为了迫使容器适应,您必须执行“clearfix”。它包括添加一个带有类的div,就像我在浮动元素列表的末尾所做的那样。这个clearfix类可能已经过时了,有许多不同的版本,这取决于您想要向后支持的程度
  • “高度:100%”不适用于内容,但最小高度适用。坏消息是向后支持并不是很好。要对此提供完美的支持,您可能需要使用JS(当窗口较小时,根据窗口高度设置高度,当窗口较大时,让其适应内容)
*
{
保证金:0;
填充:0;
}
html,正文
{
身高:100%;
}
.清楚{
明确:两者皆有;
高度:0;溢出:隐藏;/*7*/
}
P
{
字体系列:“源Sans-Pro”,无衬线;
字体大小:16px;
线高:19px;
颜色:#1e4164;
利润率:10px 10px;
}
.内容部分标题
{
字体系列:“源Sans-Pro”,无衬线;
字体大小:12px;
线高:12px;
颜色:#5c;
利润率:10px 10px;
字号:600;
}
h1
{
字体大小:36px;
字体系列:“源Sans-Pro”,无衬线;
线高:122px;
颜色:#1e4164;
字号:800;