在html / css

时间：2016-06-01 09:08:09

标签： html css

＆＃13;
＆＃13; 
<!DOCTYPE HTML>
<html style="height: 100%; width: 100%; ">
<head>
<STYLE type=text/css>
.startupbody     {border-style: none; border:0; margin: 0; padding: 0; width: 100%; height: 100%; background-color: #00ff00;  overflow:hidden; }

.div1{width: 100%; height: 40px;   border: 0px; background-color: #ff0000; overflow:hidden; margin: 0; padding: 0;}
.div2{width: 100%; height: 100%;   border: 0px; background-color: #0000ff; overflow:auto;   margin: 0; padding: 0;}

</STYLE>
</head>
<body class="startupbody">
<div class="div1">
First division
</div>
<div class="div2">
line 1<br>
line 2<br>
line 3<br>
line 4<br>
line 5<br>
line 6<br>
line 7<br>
line 8<br>
line 9<br>
line 10<br>
line 11<br>
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

我有2个div。第一个是具有固定大小（以像素为单位）的标题。 这个不应该滚动。 第二个div位于第一个div下方并包含数据。第二个应该占据窗口的其余部分。如果有更多数据，则可以显示第二个div应该滚动。 两个div应该水平占据整个窗口。 我如何在html / css中编码。 到目前为止我已经

了

除了一件事，它几乎完全符合我的要求。第二个div中的滚动条不正确。工具栏未完全显示，我无法完成 一直向下滚动。

3 个答案:

答案 0 :(得分：0)

指定第二个div的高度。

<强> CSS： 

.div2 {
    width: 100%;
    border: 0px;
    background-color: #00F;
    overflow: auto;
    margin: 0;
    padding: 0;
    height: 100px;
}

jsFiddle

注意：这里我已经硬编码了你可以设置自己身高的高度。

答案 1 :(得分：0)

您只需使用calc()函数来减去标题的40px高度，然后对其进行测试：

更改位于.div2：

的高度 

<!DOCTYPE HTML>
<html style="height: 100%; width: 100%; ">
<head>
<STYLE type=text/css>
.startupbody     {border-style: none; border:0; margin: 0; padding: 0; width: 100%; height: 100%; background-color: #00ff00;  overflow:hidden; }

.div1{width: 100%; height: 40px;   border: 0px; background-color: #ff0000; overflow:hidden; margin: 0; padding: 0;}
.div2{width: 100%; height: calc(100% - 40px);   border: 0px; background-color: #0000ff; overflow:auto;   margin: 0; padding: 0;}

</STYLE>
</head>
<body class="startupbody">
<div class="div1">
First division
</div>
<div class="div2">
line 1<br>
line 2<br>
line 3<br>
line 4<br>
line 5<br>
line 6<br>
line 7<br>
line 8<br>
line 9<br>
line 10<br>
line 11<br>
</div>
</body>
</html>

calc()它现在与大多数当前浏览器广泛兼容：

http://caniuse.com/#search=calc

答案 2 :(得分：0)

当内容溢出容器时，

overflow: auto将带来滚动条。

修改div2高度，如height: calc(100% - 40px);。这会将div2高度设置为（ 100％ - div1的高度 ）。还可以避免隐藏滚动条的底部。

enter image description here enter image description here

滚动条底部可见：

<!DOCTYPE HTML>
<html style="height: 100%; width: 100%; ">

<head>
  <STYLE type=text/css>
    .startupbody {
      border-style: none;
      border: 0;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background-color: #00ff00;
      overflow: hidden;
    }
    .div1 {
      width: 100%;
      height: 40px;
      border: 0px;
      background-color: #ff0000;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
    .div2 {
      width: 100%;
      height: calc(100% - 40px);
      border: 0px;
      background-color: #0000ff;
      overflow: auto;
      margin: 0;
      padding: 0;
    }
  </STYLE>
</head>

<body class="startupbody">
  <div class="div1">
    First division
  </div>
  <div class="div2">
    line 1
    <br>line 2
    <br>line 3
    <br>line 4
    <br>line 5
    <br>line 6
    <br>line 7
    <br>line 8
    <br>line 9
    <br>line 10
    <br>line 11
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>
  </div>
</body>

</html>

滚动条底部为隐藏：

<!DOCTYPE HTML>
<html style="height: 100%; width: 100%; ">

<head>
  <STYLE type=text/css>
    .startupbody {
      border-style: none;
      border: 0;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background-color: #00ff00;
      overflow: hidden;
    }
    .div1 {
      width: 100%;
      height: 40px;
      border: 0px;
      background-color: #ff0000;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
    .div2 {
      width: 100%;
      height: 100%;
      border: 0px;
      background-color: #0000ff;
      overflow: auto;
      margin: 0;
      padding: 0;
    }
  </STYLE>
</head>

<body class="startupbody">
  <div class="div1">
    First division
  </div>
  <div class="div2">
    line 1
    <br>line 2
    <br>line 3
    <br>line 4
    <br>line 5
    <br>line 6
    <br>line 7
    <br>line 8
    <br>line 9
    <br>line 10
    <br>line 11
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>.
    <br>
  </div>
</body>

</html>

相关问题
最新问题