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

当我删除页脚时，.content会变小。为什么呢？

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

我理解你在说什么。解决方案是什么？

您对height使用百分比值，然后将height:100%;提供给其父级，因为具有百分比值的高度继承自其父级，最后删除margin-top。< / p>

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>

Answer 2

首先，我建议您使用Html标准代码：<header>，<footer>。

然后，您必须解决overflow和float属性才能让事情发挥作用。

overflow: hidden;

和

float: left;

这是一个小提琴：https://jsfiddle.net/kro55mtz/

删除页面页脚会扭曲页面。怎么解决？

2 个答案: