<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<h1 id="titleRoom"></h1>
<h3>Online Users:</h3>
<div id="online_users"></div></br>
<button id="buttonRoom" type="button" name="button">Create Chatroom</button><button id="buttonLobby" type="button" name="button">Back Lobby</button></div>
<div class="chatArea">
<ul class="messages"></ul>
</div>
<div class='inputContainer'>
<input class="inputMessage" placeholder="Type here..."/><button id="sendButton" type="button" name="button">Send</button>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/client.js"></script>
</body>
</html>
我需要始终在顶部 div id="header"，始终在按钮 div class='inputContainer' 和中间(占据页面的其余部分)div class="chatArea"而没有那个 div class="chatArea"覆盖或被 div id="header"或 div class='inputContainer' 覆盖。有谁知道这样做的 css 代码？
最佳答案
Using
flexbox, this is easy to achieve.Set the wrapper containing your 3 compartments to
display: flex;and give it a height of100% or 100vh. The height of the wrapper will fill the entire height, and thedisplay: flex;will cause all children of this wrapper which has the appropriate flex-properties (for exampleflex:1;) to be controlled with the flexbox-magic.
示例标记:
<div class="wrapper">
<header>I'm a 30px tall header</header>
<main>I'm the main-content filling the void!</main>
<footer>I'm a 30px tall footer</footer>
</div>
相关的 CSS 是:
.wrapper {
height: 100vh;
display: flex;
/* Direction of the items, can be row or column */
flex-direction: column;
}
header,
footer {
height: 30px;
}
main {
flex: 1;
}
关于html - 使用 css 排序 div 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43617286/