Question

所以我试图设置“内容”类的高度，但它似乎不起作用。我是嵌套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" 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>

Answer 1

这种情况正在发生，因为height中定义的.inside div属性优先。在这种情况下，要使高级属性在类.content内工作，您必须执行以下操作：

.content
{
    height: 200px !important;
}

你可以在JS Bin看到一个演示：http://jsbin.com/exucek/1/edit

尝试更改height属性值以查看它是否实时应用。您会看到当值太小时，会出现滚动条。

如果您对!important CSS规则感到好奇，请看一下：

What does !important mean in CSS?

Answer 2

您的CSS将使用最具体的规则。您已在

上指定了高度

.inside div

比

更具体

.content

您还要设置高度。为了让你的CSS使用你为.content设置的高度，你需要使选择器更具体，如下所示：

.inside div{
       height:450px;
       width:700px;
}
.inside .content {
       height:100px;
       width:300px;
}

应该这样做。

Answer 3

你的代码有误！
用

替换<div class="content" style=" width:200px;" >

<div class="content" width=200 >

或更改您的css代码：

.content {
       height:200px;
            }

嵌套DIV - 嵌套DIV不占用高度？

3 个答案: