CSS容器中侧边栏的高度

Question

我有一个非常基本的模板，我一直在努力开发一个简洁的网站，有一个页眉，页脚和一个右手栏。

在确保每个父级和右侧条形div本身都设置为100％之后，我很难将右侧栏设置为100％的页面：

有人可以告诉我哪里出错吗？

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
body {
  font: 16px/26px Helvetica, Helvetica Neue, Arial;
  height: 100%;
}
.wrapper {
  width: 100%;
  min-height: 100%;
}

/* Header */
.header {
  height: 50px;
  background: #FFE680;
}

/* Middle */
.middle {
  width: 100%;
  padding: 0 0 50px;
  position: relative;
  height: 100%;
}
.middle:after {
  display: table;
  clear: both;
}
.container {
  width: 100%;
  float: left;
  overflow: hidden;
  height: 100%;
}
.content {
  height: 100%;
}

/* Right Sidebar */
.right-sidebar {
  float: right;
  width: 250px;
  margin-left: -250px;
  position: relative;
  background: #FFACAA;
  height: 100%;
}

/* Footer */
.footer {
  margin: -50px auto 0;
  height: 50px;
  background: #BFF08E;
  position: relative;
}

<div class="wrapper">
  <header class="header">
    <strong>Header:</strong>Header
  </header>
  <div class="middle">
    <div class="container">
      <main class="content">
        <strong>Content:</strong>Content
      </main>
    </div>
    <aside class="right-sidebar">
      <strong>Right Sidebar:</strong>Right sidebar
    </aside>
  </div>
</div>
<footer class="footer">
  <strong>Footer:</strong>Footer
</footer>

Answer 1

您可以使用CSS定位，只需添加此代码即可。

对于 .wrapper ，请添加

position: relative;

对于 .right-sidebar ，请使用

position: absolute;
top: 0;
right: 0;
bottom: 0;

此外，在 .right-sidebar 属性中，删除

float: right;
margin-left: -250px;
position: relative;
height: 100%;

希望它对你有所帮助。

Answer 2

因为class UserView(MyModelView): form_excluded_columns = ('password') # Form will now use all the other fields in the model # Add our own password form field - call it password2 form_extra_fields = { 'password2': PasswordField('Password') } # set the form fields to use form_columns = ( 'username', 'email', 'first_name', 'last_name', 'password2', 'created_at', 'active', 'is_admin', ) def on_model_change(self, form, User, is_created): if form.password2.data is not None: User.set_password(form.password2.data) 元素没有扩展。您需要以另一种方式设置<div class="middle">，使用视口单位获取整个视口高度，然后减去页眉和页脚。

height

＆＃13;

＆＃13;

.middle {
  ...
  height: calc(100vh - 100px);
}

＆＃13;

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
body {
  font: 16px/26px Helvetica, Helvetica Neue, Arial;
  height: 100%;
}
.wrapper {
  width: 100%;
  min-height: 100%;
}

/* Header */
.header {
  height: 50px;
  background: #FFE680;
}

/* Middle */
.middle {
  width: 100%;
  padding: 0 0 50px;
  position: relative;
  height: calc(100vh - 100px);
}
.middle:after {
  display: table;
  clear: both;
}
.container {
  width: 100%;
  float: left;
  overflow: hidden;
  height: 100%;
}
.content {
  height: 100%;
}

/* Right Sidebar */
.right-sidebar {
  float: right;
  width: 250px;
  margin-left: -250px;
  position: relative;
  background: #FFACAA;
  height: 100%;
}

/* Footer */
.footer {
  margin: -50px auto 0;
  height: 50px;
  background: #BFF08E;
  position: relative;
}

＆＃13;

＆＃13;

＆＃13;