Question

我先前设置了body {height: 100%}和html {height: 100%}，以允许我的列跨越viewport长度。一旦其中一个列的内容足以导致页面溢出，我就意识到这些列并没有随内容扩展（内容耗尽了列背景）。更改为body, html {min-height: 100%}解决了一个问题，但是这意味着其中包含较少列的列停止了跨视口并且仅随其内容一起增长（我发现这很奇怪，因为所有3列共享一个容器）。 body{height: auto}有相同的问题。

*{
font-family: 'verdana';
box-sizing: border-box;
}
}
html {
    min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  padding-top: 50px;
  min-height: 100%;
}
.row{
	height: 100%;
}
.column1 {
	float: left;
    width: 15%;
    padding: 15px;
    height: 100%; 
	background-color: var(--grey); 
    overflow-x: hidden; 
}
.column2 {
	float: left;
    width: 60%;
	height: 100%;
	padding-top: 0;
	background-color: var(--light);
}
.column3 {
	float: left;
    width: 25%;
	height: 100%;
	padding-left: 25px;
	background-color: var(--dark);
}
.row:after {
    content: "";
    display: table;
    clear: both;
}





/* irrelevant to question */
:root {
   --dark: #14161C; 
	
	--lighter: #2A2F3A;
	
	--text: #7C8EB2;
	
	--light: #FEFEFA;
	
	--grey: #EFF2F7;
	
	--blue: #4286F4;
}
/* Site Layout  */
header {
  height: 50px;
  background-color: var(--lighter);
  border-bottom: 4px solid var(--dark);
  position: fixed;
  top: 0;
  width: 100vw;
  color: var(--grey);
  text-align: center;
}

div#title-box, nav {
  display: inline-block;  
  margin-top: 0px;
}

div#title-box {
  width: 15%;
  float: left;
}

nav {
  float: right;
  margin-right: 20px;
}

div#title-box > h1, nav > button {
  margin: 0;
  padding: 10px 10px;  
  background-color: var(--dark);
  color: var(--grey);
  line-height: 25px;  
  font-size: 1em;
  height: 50px;
  border: 2px solid var(--dark);
  border-top:none;
}

nav > button {
  border: none;
}

nav > button:hover {
  background-color: var(--light);
  color: var(--dark);
  border-top:none;
}
.postbox{
	background-color: var(--dark);
	color: var(--grey);
	/*margin-top: 20px;*/
	margin-left: 25%;
	width: 75%;
	height: 9%;
	float: left;
	clear: both;
	padding-top: 20px;
	padding-left: 15px;
	border-bottom-left-radius: 5px;
	/*border-bottom-right-radius: 5px;*/
}

.posttext{
	resize: none;
	font-size: 12px;
	overflow: disabled;
	border-radius: 5px;
	color: var(--blue); 
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>


<header>
  <div id="title-box">
    <h1>TITLE 0.1 	  beta</h1>
</div>
  <div style="display: inline-block; padding-top:10px;">
  logged in in as user.
  </div>
  <nav>
    <button href="#">Admin</button>
    <button href="#">Button</button>
    <button href="#">Log Out</button>
  </nav>
</header>

<div class="row">
  <div class="column1">

  </div>

  <div class="column2">
  	<div class="postbox">
		<textarea class="posttext" placeholder="post update"></textarea><nav><button style="border: 2px solid var(--light); border-radius: 5%;">Post >></button></nav>
	</div>
  </div>
  
  <div class="column3">
<div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
  </div>
</div>

</body>
</html>

容器上的最小高度，以允许子div拉伸可阻止空兄弟div扩展

0 个答案: