Question

我目前正在与Bootstrap进行聊天项目，我有问题定位我的div。这是我的模式：

<div class="container">
    <div class="row"> <!-- #header -->
        <h1>Header stuff</h1>
    </div>
    <div class="row"> <!-- #main -->
        <div class="col-sm-9">
            <ul>Chat messages</ul> <!-- #chatbox -->
        </div>
        <div class="col-sm-3">
            <ul>Users list</ul> <!-- #users -->
        </div>
    </div>
    <div class="row"> <!-- #input -->
        <form>Input zone</form>
    </div>
</div>

基本上我想要的是将这3个行部分放入浏览器的高度，这样输入区域总是在屏幕的底部，页面不可滚动，但我想要#chatbox和要#users可滚动，以便它们适合#main。这是我到目前为止所做的：

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

body > .container {
    height: 100%; /* Fit the container into the window */
}

.row#main > div {
    max-height: 100%; /* This doesn't */
    overflow: auto;   /*    work :(   */
}

.row#input { /* Stick the input zone at the bottom */
    position: absolute;
    bottom: 0px;
    width: 100%;
    margin-bottom: 0px;
}

但是当我延长#chatbox或#users时，我得不到好结果：（

有人有个主意吗？如果可能的话，我想要一个完整的CSS解决方案：3

谢谢^^

Answer 1

假设您实际上是在创建标题/正文/页脚布局，那么应该完成这项工作：

html, 
body {
  min-height: 100%; 
  padding:0; 
  margin:0;
}

#main {
  position: absolute;
  padding: 100px 0;
  top:0; 
  bottom:0; 
  left:0; 
  right:0;
  background-color: red;
}

#header {
  margin-top:-100px; 
  height:100px; 
  background-color: blue;
}

#body {
  min-height: 100%
}

#footer {
  height: 100px; 
  margin-bottom: -100px; 
  background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<div id="main" class="container">
    <div id="header" class="row"> <!-- #header -->
        <h1>Header stuff</h1>
    </div>
    <div id="body" class="row"> <!-- #main -->
        <div class="col-sm-9">
            <ul>Chat messages</ul> <!-- #chatbox -->
        </div>
        <div class="col-sm-3">
            <ul>Users list</ul> <!-- #users -->
        </div>
    </div>
    <div id="footer" class="row"> <!-- #input -->
        <form>Input zone</form>
    </div>
</div>

Answer 2

我已经为您解决了这个问题。它纯粹的CSS，适用于任何响应式布局。

你需要巧妙地使用绝对位置。

演示 http://jsfiddle.net/h87p14tx/2/

HTML

<div class="row header"> <!-- #header -->
    <h1>Header stuff</h1>
</div>
<div class="row main"> <!-- #main -->
    <div class="col-sm-9 chatbox"> <!-- #chatbox -->
        <ul>Chat messages</ul> 
    </div>
    <div class="col-sm-3 users">  <!-- #users -->
        <ul>Users list</ul>
    </div>
</div>
<div class="row input"> <!-- #input -->
    <form>Input zone</form>
</div>

<强> CSS

.header, .input {
    width: 100%; position: absolute;
    background: red;
}

.header {
    top: 0;
    height: 70px;
}

.input {
    bottom: 0;
    height: 50px;
}

.main {
    width: 100%; position: absolute; top: 70px; bottom: 50px;
    background: green;
    overflow: auto;
}

.chatbox, .users{
    height: 100%;
}

.main .chatbox{
    width: 70%;
    float: left;
    background: blue;
}

.main .users{
    width: 30%;
    float: right;
    background: yellow;
}

如何将三个div放入窗户的高度？

2 个答案: