html - 删除页脚会扭曲页面。如何解决？

Question

这段HTML代码是我写的。

<style>
    .container { position:relative;}

    #sidebar {
        position:absolute;
        padding: 0.5%;
        top:0; bottom:0; left:0;
        width:20%;
        margin-left: 1.5%;
        margin-top: 7%;
        margin-bottom: 6.5%;
        background: #ff0;
    }

    #header { border:1px solid #000; width:100%; height:10%; 
        margin:0 0 5px 0;
    }

    #content { border:1px solid #000; width:77%; height:80%;
        position: absolute;
        margin-left: 23%;
    }
    #footer { border:1px solid #000; width:100%; height:10%;
        margin-top: 80%;
    }

    </style>

我的HTML代码如下:

<div class="container">
        <div id="sidebar">
            This is the siderbar of the page

<br><br>
                Select Gender
                <select name="gender">
                    <option value="">Select</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>

            <hr>
            <label for="amount">Age range:</label>
            <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
            <div id="slider-range"></div>

</div>
<div id="header">
            <h1>This is the header of the page</h1>
        </div>
        <div id="content">

            This is content page..

        </div>  
        <div id="footer">This is the footer of the page..</div>
    </div>

当我删除 footer 时，.content 变得太小了。 sidebar 失去颜色。我做错了什么？

Answer 1

When I remove footer, .content becomes smaller. Why?

因为 footer 使内容变大 margin-top: 80%;

I understand what you are talking about. What is the solution?

您对 height 使用百分比值，然后将 height:100%; 给它的父级，因为具有百分比值的高度继承自其父级，并且最后，移除 margin-top。

Jsfiddle

html,
body,
.container {
  position: relative;
  height: 100%;
}
#sidebar {
  position: absolute;
  padding: 0.5%;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  margin-left: 1.5%;
  margin-top: 7%;
  margin-bottom: 6.5%;
  background: #ff0;
}
#header {
  border: 1px solid #000;
  width: 100%;
  height: 10%;
  margin: 0 0 5px 0;
}
#content {
  border: 1px solid #000;
  width: 77%;
  height: 80%;
  position: absolute;
  margin-left: 23%;
}
#footer {
  border: 1px solid #000;
  width: 100%;
  height: 10%;
}

<div class="container">
  <div id="sidebar">
    This is the siderbar of the page

    <br>
    <br>Select Gender
    <select name="gender">
      <option value="">Select</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>

    <hr>
    <label for="amount">Age range:</label>
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
    <div id="slider-range"></div>

  </div>
  <div id="header">
    <h1>This is the header of the page</h1>
  </div>
  <div id="content">

    This is content page..

  </div>
</div>