Question

我的问题是，当我在浏览器中查看时，红色不会填满整个窗口。我希望它使用100％height的可用空间。我认为body和html width无效，我还在页面上添加了CSS重置。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
  </head>
  <style>
    body {
        padding:0px;
        margin:0px;
    }
    .container {
        width:100%;
        background-color:#F00;
        float:left;
    }
    .inner-div {
        width:980px;
        background-color:#00F;
        margin:0px auto;
        height:200px;
        color: #FFF;
        font-family: arial;
        padding: 19px;
        margin-bottom: 22px;
    }
  </style>
  <body>
    <div class="main">
      <div class="container">
        <div class="inner-div"></div>
      </div>
      <div class="container">
        <div class="inner-div"></div>
      </div>
    </div>
  </body>
</html>

Answer 1

这是工作小提琴

http://jsfiddle.net/s3bjkqj4/8/

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
  </head>
<style>
    html,body {    
        margin:0 auto;
        height:100%;
    }
    .main { width:100%; 
        Height:100%;
        background-color:#F00; 
        float:left;
    }
    .container,.container1 { 
        width:98%; 
        height:40%;
        padding:1%;
        margin:0;
    }
    .container { 
        background-color:orange; 
    }
    .container1 { 
        background-color:green; 
    }
    .inner-div ,.inner-div1{
        background-color:#00F;
        height:98%;
        margin:0 auto;
        text-align:center;
    }
  </style>
  <body>
    <div class="main">
      <div class="container">
        <div class="inner-div"></div>
      </div>
      <div class="container">
        <div class="inner-div1"></div>
      </div>
    </div>
  </body>
</html>

当我最小化页面时，车身颜色没有填满整个窗口

1 个答案: