Flex容器取整个高度

问题描述 投票：1回答：3

我有一个Flex容器，它来自另一个Flex容器，第一个是导航栏，第二个是页面内容。

我试着让内容占据页面的整个高度，并且发现只有一件事可以将容器的高度设置为100vh。

但后来我遇到了一个问题，我需要从视口中减去导航的高度。

/* Mixins Definitions */
/* Actual CSS */
.navbar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.81);
  font-size: 14px;
  -webkit-flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: stretch;
  list-style: none;
}
.navbar li {
  margin: 0;
  line-height: 3.2em;
  display: block;
}
.navbar li i {
  margin-right: 10px;
}
.navbar li a {
  color: #9d9d9d;
  text-decoration: none;
  padding: 15px;
  margin: 0;
}
.navbar li a:hover {
  color: #FFFFFF;
}
.navbar li:first-child {
  margin-right: auto;
}
.navbar li:first-child a {
  font-size: 20px;
}
@media all {
}
@media all and (max-width: 600px) {
  .navbar {
    justify-content: space-around;
  }
  .navbar li:first-child {
    display: none;
  }
}
.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0;
  padding: 0;
}
.container .sidebar {
  width: 16.5%;
  border-right: 1px solid #ee0005;
}
.container .sidebar .navigation {
  padding: 0;
  list-style: none;
}
.container .sidebar .navigation a {
  padding: 10px 15px 10px 20px;
  text-decoration: none;
  display: inline-block;
  color: #337ab7;
  width: 100%;
}
.container .sidebar .navigation a:hover {
  background-color: #EEEEEE;
}
.container .sidebar .navigation .active > a {
  background-color: #428bca;
  color: #FFFFFF;
}
.container .content {
  flex: 1;
  height: 100%;
  padding: 30px;
}
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  background-color: #f8f8f8;
  margin: 0;
  min-height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<ul class="navbar">
    <li><a href="#">Company</a></li>
    <li><a href="#"><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>Log In</a></li>
    <li><a href="#">Dashboard</a></li>
</ul>
<div class="container">
    <div class="sidebar">
        <ul class="navigation">
            <li><a href="/dashboard">Dashboard</a></li>
            <li class="active"><a href="/hosts">Hosts <span class="sr-only">(current)</span></a></li>
            <li><a href="/trusers">Users</a></li>
        </ul>
    </div>
    <div class="content">Content</div>
</div>
</body>

https://jsfiddle.net/0xj1v8mw/1/

html css css3 flexbox
3个回答
2
投票

您可以在height上设置body，而不是.container，并添加一些额外的flex规则：

fiddle

/* Mixins Definitions */


/* Actual CSS */

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.navbar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.81);
  font-size: 14px;
  -webkit-flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: stretch;
  list-style: none;
}

.navbar li {
  margin: 0;
  line-height: 3.2em;
  display: block;
}

.navbar li i {
  margin-right: 10px;
}

.navbar li a {
  color: #9d9d9d;
  text-decoration: none;
  padding: 15px;
  margin: 0;
}

.navbar li a:hover {
  color: #FFFFFF;
}

.navbar li:first-child {
  margin-right: auto;
}

.navbar li:first-child a {
  font-size: 20px;
}

@media all {}

@media all and (max-width: 600px) {
  .navbar {
    justify-content: space-around;
  }
  .navbar li:first-child {
    display: none;
  }
}

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0;
  padding: 0;
  flex: 1;
}

.container .sidebar {
  width: 16.5%;
  border-right: 1px solid #ee0005;
}

.container .sidebar .navigation {
  padding: 0;
  list-style: none;
}

.container .sidebar .navigation a {
  padding: 10px 15px 10px 20px;
  text-decoration: none;
  display: inline-block;
  color: #337ab7;
  width: 100%;
}

.container .sidebar .navigation a:hover {
  background-color: #EEEEEE;
}

.container .sidebar .navigation .active>a {
  background-color: #428bca;
  color: #FFFFFF;
}

.container .content {
  flex: 1;
  height: 100%;
  padding: 30px;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  background-color: #f8f8f8;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}
<body>
  <ul class="navbar">
    <li><a href="#">Company</a></li>
    <li><a href="#"><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>Log In</a></li>
    <li><a href="#">Dashboard</a></li>
  </ul>
  <div class="container">
    <div class="sidebar">
      <ul class="navigation">
        <li><a href="/dashboard">Dashboard</a></li>
        <li class="active"><a href="/hosts">Hosts <span class="sr-only">(current)</span></a></li>
        <li><a href="/trusers">Users</a></li>
      </ul>
    </div>
    <div class="content">sdfsd</div>
  </div>
</body>
1
投票

将height: 100%添加到html，body和.container元素：

/* Mixins Definitions */
/* Actual CSS */
html, body {
  height: 100%;
}
.navbar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.81);
  font-size: 14px;
  -webkit-flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: stretch;
  list-style: none;
}
.navbar li {
  margin: 0;
  line-height: 3.2em;
  display: block;
}
.navbar li i {
  margin-right: 10px;
}
.navbar li a {
  color: #9d9d9d;
  text-decoration: none;
  padding: 15px;
  margin: 0;
}
.navbar li a:hover {
  color: #FFFFFF;
}
.navbar li:first-child {
  margin-right: auto;
}
.navbar li:first-child a {
  font-size: 20px;
}
@media all {
}
@media all and (max-width: 600px) {
  .navbar {
    justify-content: space-around;
  }
  .navbar li:first-child {
    display: none;
  }
}
.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0;
  padding: 0;
  height: 100%;
}
.container .sidebar {
  width: 16.5%;
  border-right: 1px solid #ee0005;
}
.container .sidebar .navigation {
  padding: 0;
  list-style: none;
}
.container .sidebar .navigation a {
  padding: 10px 15px 10px 20px;
  text-decoration: none;
  display: inline-block;
  color: #337ab7;
  width: 100%;
}
.container .sidebar .navigation a:hover {
  background-color: #EEEEEE;
}
.container .sidebar .navigation .active > a {
  background-color: #428bca;
  color: #FFFFFF;
}
.container .content {
  flex: 1;
  height: 100%;
  padding: 30px;
}
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  background-color: #f8f8f8;
  margin: 0;
  min-height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}
<body>
<ul class="navbar">
    <li><a href="#">Company</a></li>
    <li><a href="#"><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>Log In</a></li>
    <li><a href="#">Dashboard</a></li>
</ul>
<div class="container">
    <div class="sidebar">
        <ul class="navigation">
            <li><a href="/dashboard">Dashboard</a></li>
            <li class="active"><a href="/hosts">Hosts <span class="sr-only">(current)</span></a></li>
            <li><a href="/trusers">Users</a></li>
        </ul>
    </div>
    <div class="content">sdfsd</div>
</div>
</body>
-1
投票

对于container类，只需使用height: calc(100vh - 46px);。

我看到你的导航栏高度是你给定演示的46px。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.