Question

这似乎有很多问题，但是我在这里找到的所有修复方法（flexbox，表格单元格显示等）似乎都没有完全解决。我希望在顶部有一个顶部栏，在底部有一个底部栏，并且有一个中间区域，该区域至少使其中三个填充页面（并在中间分开）。这是基本布局：

html,
body {
  height: 100%;
  margin: 0px auto;
  padding: 0px;
}

#main {
  height: 100%;
  min-height: 100%;
  margin: 0px auto;
  padding: 0px;
}

#topBar {
  color: #0A2C73;
  height: 80px;
  border-bottom: 5px solid #0A2C73;
}

#middle {
  height: auto;
}

#middle>div {
  display: inline-block;
}

#middle #leftSide {
  min-height: 100%;
  height: auto;
  max-width: 140px;
  border-right: 5px solid #0A2C73;
}

#bottom {
  height: 20px;
}

<div id="main">
  <div id="topBar">
    top
  </div>
  <div id="middle">
    <div id="leftSide">
      left
    </div>
    <div id="rightSide">
      right
    </div>
  </div>
  <div id="bottom">
    test
  </div>
</div>

和fiddle demo

但是我发现的所有物品似乎都不起作用，或者中间重叠顶部，或者高度过高等等。

Answer 1

使用CSS网格，您可以执行以下操作：

body { margin: 0 }

.main {
  display: grid;
  grid-template-rows:    60px 1fr 60px;
  grid-template-columns: minmax(300px, 1fr) 3fr;
  min-height: 100vh;
}

.top, .bottom {
  background-color: #BAD;
  grid-column: span 2;
}

.content {
  background-color: #BADA55;
}

.sidebar {
  background-color: #A55;
}

<div class="main">
  
    <div class="top"></div>
    <div class="sidebar"></div>
    <div class="content"></div>
    <div class="bottom"></div>
  
</div>

Answer 2

没有理由您无法使用网格

    #main {
      display: grid;
      width: 100%;
    }
    #main > div{
      border: 1px solid black;
      margin: 5px;
      padding: 5px;
      text-align: center;
    }
    #topBar {
      grid-column: 1 / 3;
      grid-row: 1;
     }
    #rightSide {
      grid-column: 2;
      grid-row: 2;
       
    }
    #leftSide {
      grid-column: 1;
      grid-row: 2;
    }
    #bottom {
      grid-column: 1 / 3;
      grid-row: 3;
    }

<div id='main'>
  <div id='topBar'>
  top
  </div>
  <div id='leftSide'>
  left
  </div>
  <div id='rightSide'>
  right
  </div>
  <div id='bottom'>
  bottom
  </div>
</div>

Answer 3

Flexbox解决方案：

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

#middle {
    flex: 1;
}

您需要告诉flex将#main用作列单元格，在这种情况下，使用flex: 1上的#middle设置，中间部分会动态增长以适应负空间。您还需要通过将min-height: 100vh添加到#main元素来创建该负数空间。

我建议通过删除#main并将其样式添加到body来展平DOM结构。

在上一个答案中，评论者使用了类。这是CSS最佳实践中推荐的方法。

Answer 4

Flexbox可以使其快速工作。

    html,
    body {
        height: 150px; /* demo only */
        margin: 0px auto;
        padding: 0px;
    }

    #main {
        height: 100%;
        display: flex;
        flex-direction: column;
        background: orange;
    }

    #topBar {
        color: #0A2C73;
        height: 80px;
        border-bottom: 5px solid #0A2C73;
        background: pink;
    }

    #middle {
        background: lightgreen;
        flex-grow: 1;
        overflow: auto;
    }

    #middle>div {
        display: inline-block;
    }

    #middle #leftSide {
        max-width: 140px;
        border-right: 5px solid #0A2C73;
    }

    #bottom {
        height: 20px;
        background: lightblue;
    }

<div id="main">
    <div id="topBar">
        top
    </div>
    
    <div id="middle">
        <p>middle</p>
        <p>middle</p>
        <p>middle</p>
        <p>middle</p>
        <p>middle</p>
        <p>middle</p>
        <p>middle</p>
        <p>middle</p>
        <p>middle</p>
        <p>middle</p>
        <p>middle</p>
    </div>
    
    <div id="bottom">
        bottom
    </div>
</div>

Answer 5

you need to add flex on #main and flex-grow:1 property on #middle.
html, body {
    height: 100%;
    margin: 0px auto;
    padding: 0px;
}
#main {
    height: 100%;
    min-height: 100%;
    margin: 0px auto;
    padding: 0px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}
#topBar {
    color: #0A2C73;
    height:80px;
    border-bottom: 5px solid #0A2C73;
}
#middle {
    height:auto;
    flex-grow: 1;
}
  #middle > div{
    display:inline-block;
  }
    #middle #leftSide {
        min-height: 100%;
        height:auto;
        max-width: 140px;
        border-right: 5px solid #0A2C73;
    }
#bottom{
    height:20px;
}

这是更新的小提琴https://jsfiddle.net/8km54zce/。我希望这就是你想要的。

Answer 6

最佳做法

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div class="container">
   <div class="row">
       <div class="col-md-6">Left Site</div>
       <div class="col-md-6">Right Site</div>
   </div>
 <div class="row">
       <div class="col-md-12">Middle</div>
   </div>
</div>

</body>
</html>

div不会填充父div

6 个答案: