当中心div的内容增加时，左右div的高度不增加。我希望当内容溢出其高度时，左右div也会增加。
<! DOCTYPE html>
<html>
<head>
<style>
.header
{
background-color:grey;
margin-top:20px;
margin-left:20px;
margin-right:20px;
height:100px;
width:97%;
border:2px dotted green;
display:table;
}
.left
{clear:both;
background-color:grey;
margin-top:20px;
margin-left:10px;
float:left;
margin-right:10px;
height:100%;
width:10%;
display:table;
border:2px dotted green;
}
.center
{
background-color:grey;
margin-top:20px;
margin-bottom:10px;
margin-left:10px;
float:left;
height:100%;
width:75%;
display:table;
border:2px dotted green;
}
.right
{
background-color:grey;
margin-top:20px;
margin-bottom:10px;
margin-left:10px;
float:right;
height:100%;
width:10%;
display:table;
border:2px dotted green;
}
.footer
{
background-color:white;
border:2px dotted green;
margin-left:20px;
margin-right:20px;
height:50px;
width:97%;
display:table;
}
</style>
<title> Login </title>
</head>
<body text="black">
<div class="header">
HEADER
</div>
<div class="container">
<div class="left">
home<br>
profile<br>
services<br>
</div>
<div class="center">
What is HTML
HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?
Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.
Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.
An HTML document is made of many HTML tags and each HTML tag contains different content.
HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?
<p> Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.</p>
<p> Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.</p>
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.
<p> An HTML document is made of many HTML tags and each HTML tag contains di
HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?</p>
Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.
Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.
An HTML document is made of many HTML tags and each HTML tag contains di
HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?
Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.
Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.
An HTML document is made of many HTML tags and each HTML tag contains di
HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?
Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.
Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.
An HTML document is made of many HTML tags and each HTML tag contains di
HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?
Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.
Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.
An HTML document is made of many HTML tags and each HTML tag contains di
HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?
Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.
Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.
An HTML document is made of many HTML tags and each HTML tag contains di
HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?
Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.
Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.
The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.
An HTML document is made of many HTML tags and each HTML tag contains di
</div>
<div class="right">
RIGHT
</div>
</div><div class="footer">
Footer
</footer>
</body>
</html>
答案 0 :(得分：1)
您需要将display:table-cell放在左侧，中间，右侧div上。并且您不能将FLOAT与display属性一起使用。使用Float显示将无法正常工作。因此，请从周围删除float:left。
无需将height:100%放在左，中，右div上。 height:100%仅适用于身体内部最外层的div。
答案 1 :(得分：0)
我认为你的display: table和display: table-cell风格混淆了。 table-cell s应该包含在table中，这意味着您应该向.container课程显示table，并.left, .center, .right显示table-cell }。找出边距/填充以给自己提供元素之间的差距，就像你想要做的那样，可能需要在元素中嵌套一组div，其显示属性为block或{{1使您能够添加边距/填充。
这是一个快速标记，您应该将其作为起点。
http://codepen.io/dustinpoissant/pen/bNRYwr?editors=110
inline-block<header>
<h2>Header</h2>
</header>
<div class="container">
<div class="left">
<p>home<br>
profile<br>
services</p>
</div><!-- .left -->
<div class="center">
<h2>What is HTML</h2>
<p>HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?</p>
<p>Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.</p>
<p>Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.</p>
<p>The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.</p>
<p>An HTML document is made of many HTML tags and each HTML tag contains different content.</p>
<p>HTML is an acronym which stands for Hyper Text Mark Up Language. Let's see what is Hyper Text and what is Mark Up Language?</p>
<p>Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext.</p>
<p>Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.</p>
<p>The word Markup refers to the symbol or Sequence of characters added to the ordinary text to define the structure of the text. It can also specify links to other documents.</p>
<p>An HTML document is made of many HTML tags and each HTML tag contains... </p>
</div><!-- .center -->
<div class="right">
<p>RIGHT</p>
</div><!-- .right -->
</div><!-- .container -->
<footer>
<p>FOOTER</p>
</footer>
我希望这可以帮助您了解header {
display: block;
background-color: grey;
height: 100px;
border: 2px dotted green;
}
.container {
display: table;
}
.left, .right {
display: table-cell;
width: 20%;
height: 100%;
vertical-align: top;
border: 2px dotted green;
background-color: grey;
}
.center {
display: table-cell;
width: 60%;
height: 100%;
vertical-align: top;
border: 2px dotted green;
background-color: grey;
}
footer {
display: block;
background-color: white;
border:2px dotted green;
height:50px;
}
vs display: table;
另一个答案可能是使用实际的display: table-cell;。
或者您可以使用jQuery执行以下操作：
<table>这将迫使两侧始终匹配中心的高度。这种方法的缺点是当侧面高于中心时，侧面高度将如预期的那样仍然与中心的高度相匹配，从而导致溢出。