Css 嵌套DIV-嵌套DIV不'；你不需要身高吗？
所以我试图设置“内容”类的高度，但它似乎不起作用。我对嵌套div很在行，我尝试过谷歌搜索发现的修复方法，但似乎没有任何效果。帮忙Css 嵌套DIV-嵌套DIV不'；你不需要身高吗？,css,html,height,nested,Css,Html,Height,Nested,所以我试图设置“内容”类的高度，但它似乎不起作用。我对嵌套div很在行，我尝试过谷歌搜索发现的修复方法，但似乎没有任何效果。帮忙 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Website Horizontal Scrolling with jQuery" />
<meta name="keywords" content="jquery, horizontal, scrolling, scroll, smooth"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<style>
body {
background-mage: url(bg.jpg), url(bgrepeat.jpg);
background-repeat: no-repeat, repeat-x;
background-attachment:fixed;
background-position:left bottom;
background-color: #D3C8B6;
}
#wrapper {
text-align: center;
width: 100%;
position:absolute;
bottom:0;
}
#header,
#main,
#sidebar,
#footer {
display:inline;
position:relative;
float:left;
}
#header,
#footer {
width:100%;
background-color:#eee;
opacity:1.0;
filter:alpha(opacity=100);
}
#header {
margin-bottom:1%;
height:100px;
}
#footer {
margin-top:1%;
height:40px;
}
#main {
width:20%;
height:475px;
margin-right:1%;
text-align: center;
background-color:#eee;
opacity:1.0;
filter:alpha(opacity=100);
}
#sidebar {
width:79%;
height:475px;
overflow: hidden;
}
.viewport{
width:100%;
height:475px;
overflow-x:scroll;
}
.inside{
width:9000px;
height:200px;
}
.inside div{
height:450px;
width:700px;
float:left;
margin-right:4px;
}
.content {
height:100px;
width:300px;
overflow-y: scroll;
position:relative;
top: 10px;
right:10px;
}
.one{
background-image: url(images/frame.png)
}
.two{
background-image: url(images/frame2.png);
text-align:center;
z-index: 1;
}
.three{
background-image: url(images/frame1.png);
}
.four{
background-image: url(images/frame3.png);
}
.five {
background-image: url(images/frame4.png);
}
</style>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="main">
<div class="one-l">Home</div>
<div class="two-l">Portfolio</div>
<div class="three-l">Resume</div>
<div class="four-l">Blog</div>
<div class="five-l">Contact</div>
</div>
<div id="sidebar">
<div class="viewport" >
<div class="inside" >
<div class="one">home</div>
<div class="two">
<div class="content" width="200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum, leo vitae ornare dignissim, lorem urna tempor felis, in fringilla urna justo non velit. Cras imperdiet viverra ligula, vitae auctor neque elementum eget. In nec quam est, quis molestie magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida, elit a iaculis consequat, ligula nisl cursus turpis, in giat eu placerat vel, viverra vel nibh. Ut vitae felis ac nisi euismod porta. Aliquam et gravida mauris. Maecenas id massa ligula, et blandit orci. In hac habitasse platea dictumst. Donec eu tortor libero. Donec eget leo mi. Mauris quis neque vitae massa facilisis placerat ut et felis. Nullam eleifend faucibus diam, sit amet pellentesque leo euismod id. Morbi interdum placerat nibh, in mattis sem eleifend quis. Nunc non nunc sed lorem condimentum molestie mattis blandit dui. Nulla urna ligula, auctor id venenatis eu, placerat ut dui. In fringilla purus gravida sapien cursus imperdiet porta ligula lobortis. Sed pellentesque, nisi quis tristique pulvinar, justo odio sollicitudin risus, non euismod dui ante nec tortor.
</div></div>
<div class="three">resume</div>
<div class="four">blog</div>
<div class="five">contact</div>
</div>
</div>
身体{
背景图像：url（bg.jpg），url（bgreat.jpg）；
背景重复：无重复，重复-x；
背景附件：固定；
背景位置：左下；
背景色：#D3C8B6；
}
#包装纸{
文本对齐：居中；
宽度：100%；
位置：绝对位置；
底部：0；
}
#标题，
#主要的，
#侧边栏，
#页脚{
显示：内联；
位置：相对位置；
浮动：左；
}
#标题，
#页脚{
宽度：100%；
背景色：#eee；
不透明度：1.0；
过滤器：α（不透明度=100）；
}
#标题{
利润底部：1%；
高度：100px；
}
#页脚{
利润率最高：1%；
高度：40px；
}
#主要{
宽度：20%；
身高：475px；
保证金权利：1%；
文本对齐：居中；
背景色：#eee；
不透明度：1.0；
过滤器：α（不透明度=100）；
}
#边栏{
宽度：79%；
身高：475px；
溢出：隐藏；
}
.视口{
宽度：100%；
身高：475px；
溢出-x：滚动；
}
.里面{
宽度：9000px；
高度：200px；
}
.内分区{
高度：450px；
宽度：700px；
浮动：左；
保证金权利：4px；
}
.内容{
高度：100px；
宽度：300px；
溢出y：滚动；
位置：相对位置；
顶部：10px；
右：10px；
}
.一{
背景图像：url（images/frame.png）
}
.二{
背景图片：url（images/frame2.png）；
文本对齐：居中；
z指数：1；
}
.三{
背景图片：url（images/frame1.png）；
}
.4{
背景图片：url（images/frame3.png）；
}
.5{
背景图片：url（images/frame4.png）；
}
家
文件夹
简历
博客
接触
家
Lorem ipsum dolor sit amet，是一位杰出的献身者。梅塞纳斯·比本杜姆、利奥·维塔·奥纳雷·德格尼西姆、洛勒姆·乌尔纳·临时猫咪，在弗林利亚·乌尔纳·胡斯托·诺维利特。viverra ligula，vitae auctor neque elementum eget。在nec quam est，这是一个巨大的挑战。Lorem ipsum dolor sit amet，是一位杰出的献身者。孕妇、孕妇、头巾、舌苔、巨大的胎盘、胎衣。这是我的生命。阿利奎姆和孕妇莫里斯。我是马萨·利古拉和布兰迪·奥奇。在hac habitasse Plateum，一句名言。Donec欧盟侵权人或自由人。Donec eget leo mi。Mauris quis neque vitae Massafacilisis placerat ut et felis。阿梅特·佩伦特斯克·利奥·尤伊斯莫（leo euismod id.Morbi interdum Placelat nibh）坐在马蒂斯·埃利弗德·奎斯（mattis sem eleifend quis）的床上。Nunc非Nunc sed lorem调味品调味品二联。未经许可，拍卖人身份为欧盟威尼斯人，酒后驾车。在妊娠期流苏中，sapien cursus不受叶舌门的影响。佩伦茨克、普尔维纳尔、索利西图丁、非欧伊斯莫德和侵权者。
简历
博客
接触
中定义的height
属性优先于.inside div
。在这种情况下，要使height属性在class.content
中工作，必须执行以下操作：
.content
{
height: 200px !important;
}
您可以在JS Bin上看到一个演示：
尝试更改height
属性值，以查看其是否实时应用。您将看到，当值太小时，会出现滚动条
如果你对这个感到好奇！重要信息
CSS规则，请查看此处：
您的CSS将使用任何最具体的规则。
您已在上指定了高度
.inside div
哪个比什么更具体
.content
您也可以在其中设置高度。
为了让CSS使用您为.content设置的高度，您需要使选择器更具体，如下所示：
.inside div{
height:450px;
width:700px;
}
.inside .content {
height:100px;
width:300px;
}
这应该可以解决问题。您的代码中有一个错误
将
替换为
<div class="content" width=200 >
.content {
height:200px;
}