Question

我在顶部有一个导航栏，将html和body设置为高度100％，我使用引导网格将页面分为两列，并且我想将两列的高度设置为不超过页面的高度，因此没有滚动条出现

如何设置列高以使滚动条不出现

html：

<body>

    <!-- Navbar  -->
<nav class="navbar navbar-default no-extra-padding no-extra-margin">
<div class="container-fluid">
    <div class="navbar-header">
    <a class="navbar-brand" href="#">UAY</a>
    </div>
</div>
</nav>

<div class="container-fluid">
<div class="row first-row">
    <!-- left column - plot area  -->
    <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 column1" >
        <div class="btn-groups button-align">
                <button class="btn pull-right" onclick="listView()"><i class="fa fa-bars"></i> List</button> 
                <button class="btn pull-right active" onclick="gridView()"><i class="fa fa-th-large"></i> Grid</button>
        </div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 column2">
        <div class="container-fluid fill">
                <div class="row data-table">
                    <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12 container-fluid use-height">
                    <div class="well border-plot no-extra-padding no-extra-margin">
                    <div class="row data-table">

css：

html {
    height: 100%;
    margin:0 !important;  
}
.column2{
    background-color:lightgreen;
    max-height:100%;
}

     .fill { 
    min-height: 100%;
    height: 100%;
}

我希望此column2高度适合页面而不超过页面

Answer 1

您可以使用父母和祖父母等上的height: 100%来实现。您可以在codepen上看到一个演示：

https://codepen.io/k-five/pen/gZgwqO

或此处：

html,body{
height: 100%;
  margin: 0; padding: 0; border: none;
}

body > div.parent {
  height: 100%;
}
div.parent > span {
  display: inline-block; width: 50%;
}
div.parent > span:first-child {
  
  height: 100%; background-color: #F00;
}
div.parent > span:last-child {
  height: 100%; background-color: #FF0;
}

<!DOCTYPE>
<html>
  <body>
    
    <div class="parent">
      <span>1</span><span>2</span>
    </div>
    
  </body>
  </html>

如果您想使用 bootstrap ，请查看 https://getbootstrap.com/docs/4.0/utilities/sizing/，即h-100

Answer 2

您尝试过vh吗？

.column2{
    height: 100vh    
}

它代表视口的高度，它将是您正在其上查看的屏幕的确切大小。

Answer 3

您是否尝试过在Bootstrap中使用.row-eq-height？看看here。

请注意，尽管它们使用的是flex样式，所以请在使用此类CSS之前先检查受支持的浏览器。

/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

还有一件事情，对于诸如此类col-md-6 col-sm-6 col-xs-6 col-lg-6的类，您不必指定所有的断点。只需使用col-xs-6，它将被应用到所有断点，因此“移动优先”，可以节省一些代码和文件大小。让我知道是否有帮助。 ;）

将列设置为页面的全高，不超过页面大小

3 个答案: