我创建了一个简单的网页，它有标题、菜单和内容部分，每个部分都是div。
https://jsfiddle.net/wz8vctuq/1/
<body>
<div class="page">
<div class="logo">
</div>
<div class="wrap">
<div class="header">
<div class="header-inner">
</div>
</div>
<div class="content">
<div class="menu left">
</div>
<div class="content-inner">
<!-- content begins -->
<div class="wrapper">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
当我运行这个live时，我从MySQL数据库中读取数据，然后填充内容DIV.
我遇到的问题是数据溢出了DIV的底部，我真正希望内容(白色(DIV增长以填充数据，我希望菜单DIV(黄色(扩展，使其与内容DIV的长度相同。
有人能建议我怎么做吗。小提琴展示了我迄今为止所取得的成就。
感谢
这样尝试：https://jsfiddle.net/dfhxsnLc/1/
.page {
margin: 0 auto;
width: 1024px;
height: 730px;
text-align: left;
padding-top: 20px;
}
.logo {
padding-bottom: 5px;
}
.wrap {
width: 1022px;
border: 1px solid #000000;
background: #ffffff;
min-height: 660px;
}
/* Temp styles */
/*.header, .menu, .content, .footer { border: 1px solid black; }*/
.content, .menu, .footer { border-top: none; }
.menu.right { border-right: none; }
.menu.left { border-left: none; }
/* Core styles */
.header {
position: relative; /* needed for stacking */
height: 50px;
width: 100%;
background: #ffbfff;
}
.header-inner {
line-height: 50px;
float:right;
padding-right: 50px;
font-weight: 600;
color: #ffffff;
}
.content {
position: relative; /* needed for stacking */
width: 100%;
min-height: 610px;
display: table;
}
.content-inner {
position: relative; /* needed for stacking */
width: 886px;
min-height: 590px;
display: table-cell;
}
.frontpage {
position: relative; /* needed for stacking */
width: 886px;
min-height: 610px;
}
.menu {
position: relative; /* needed for stacking */
width: 135px;
border-top: none;
}
.menu.left {
position: absolute;
top: 0;
bottom: 0;
left:0;
height: 100%;
background: #ffffbf;
display: table-cell;
}
.menu.left:after,
.menu.right:after {
clear: both;
content: " 020";
display: block;
overflow: hidden;
}
.menu.right { float: right; }
.footer {
position: relative; /* needed for stacking */
width: 100%;
height: 100px;
}
.wrapper {
overflow:hidden;
font-size: 14px;
padding: 0px 15px 10px 15px;
}<body>
<div class="page">
<div class="logo">
</div>
<div class="wrap">
<div class="header">
<div class="header-inner">
</div>
</div>
<div class="content">
<div class="menu left"></div>
<div class="content-inner">
<!-- content begins -->
<div class="wrapper">
One advanced diverted domestic sex repeated bringing you old. Possible procured her trifling laughter thoughts property she met way. Companions shy had solicitude favourable own. Which could saw guest man now heard but. Lasted my coming uneasy marked so should. Gravity letters it amongst herself dearest an windows by. Wooded ladies she basket season age her uneasy saw. Discourse unwilling am no described dejection incommode no listening of. Before nature his parish boy.
Folly words widow one downs few age every seven. If miss part by fact he park just shew. Discovered had get considered projection who favourable. Necessary up knowledge it tolerably. Unwilling departure education is be dashwoods or an. Use off agreeable law unwilling sir deficient curiosity instantly. Easy mind life fact with see has bore ten. Parish any chatty can elinor direct for former. Up as meant widow equal an share least.
Another journey chamber way yet females man. Way extensive and dejection get delivered deficient sincerity gentleman age. Too end instrument possession contrasted motionless. Calling offence six joy feeling. Coming merits and was talent enough far. Sir joy northward sportsmen education. Discovery incommode earnestly no he commanded if. Put still any about manor heard.
Village did removed enjoyed explain nor ham saw calling talking. Securing as informed declared or margaret. Joy horrible moreover man feelings own shy. Request norland neither mistake for yet. Between the for morning assured country believe. On even feet time have an no at. Relation so in confined smallest children unpacked delicate. Why sir end believe uncivil respect. Always get adieus nature day course for common. My little garret repair to desire he esteem.
In it except to so temper mutual tastes mother. Interested cultivated its continuing now yet are. Out interested acceptance our partiality affronting unpleasant why add. Esteem garden men yet shy course. Consulted up my tolerably sometimes perpetual oh. Expression acceptance imprudence particular had eat unsatiable.
Had denoting properly jointure you occasion directly raillery. In said to of poor full be post face snug. Introduced imprudence see say unpleasing devonshire acceptance son. Exeter longer wisdom gay nor design age. Am weather to entered norland no in showing service. Nor repeated speaking shy appetite. Excited it hastily an pasture it observe. Snug hand how dare here too.
Improve ashamed married expense bed her comfort pursuit mrs. Four time took ye your as fail lady. Up greatest am exertion or marianne. Shy occasional terminated insensible and inhabiting gay. So know do fond to half on. Now who promise was justice new winding. In finished on he speaking suitable advanced if. Boy happiness sportsmen say prevailed offending concealed nor was provision. Provided so as doubtful on striking required. Waiting we to compass assured.
You disposal strongly quitting his endeavor two settling him. Manners ham him hearted hundred expense. Get open game him what hour more part. Adapted as smiling of females oh me journey exposed concern. Met come add cold calm rose mile what. Tiled manor court at built by place fanny. Discretion at be an so decisively especially. Exeter itself object matter if on mr in.
Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we give rest half. Painful so he an comfort is manners.
Article nor prepare chicken you him now. Shy merits say advice ten before lovers innate add. She cordially behaviour can attempted estimable. Trees delay fancy noise manor do as an small. Felicity now law securing breeding likewise extended and. Roused either who favour why ham.
One advanced diverted domestic sex repeated bringing you old. Possible procured her trifling laughter thoughts property she met way. Companions shy had solicitude favourable own. Which could saw guest man now heard but. Lasted my coming uneasy marked so should. Gravity letters it amongst herself dearest an windows by. Wooded ladies she basket season age her uneasy saw. Discourse unwilling am no described dejection incommode no listening of. Before nature his parish boy.
Folly words widow one downs few age every seven. If miss part by fact he park just shew. Discovered had get considered projection who favourable. Necessary up knowledge it tolerably. Unwilling departure education is be dashwoods or an. Use off agreeable law unwilling sir deficient curiosity instantly. Easy mind life fact with see has bore ten. Parish any chatty can elinor direct for former. Up as meant widow equal an share least.
Another journey chamber way yet females man. Way extensive and dejection get delivered deficient sincerity gentleman age. Too end instrument possession contrasted motionless. Calling offence six joy feeling. Coming merits and was talent enough far. Sir joy northward sportsmen education. Discovery incommode earnestly no he commanded if. Put still any about manor heard.
Village did removed enjoyed explain nor ham saw calling talking. Securing as informed declared or margaret. Joy horrible moreover man feelings own shy. Request norland neither mistake for yet. Between the for morning assured country believe. On even feet time have an no at. Relation so in confined smallest children unpacked delicate. Why sir end believe uncivil respect. Always get adieus nature day course for common. My little garret repair to desire he esteem.
In it except to so temper mutual tastes mother. Interested cultivated its continuing now yet are. Out interested acceptance our partiality affronting unpleasant why add. Esteem garden men yet shy course. Consulted up my tolerably sometimes perpetual oh. Expression acceptance imprudence particular had eat unsatiable.
Had denoting properly jointure you occasion directly raillery. In said to of poor full be post face snug. Introduced imprudence see say unpleasing devonshire acceptance son. Exeter longer wisdom gay nor design age. Am weather to entered norland no in showing service. Nor repeated speaking shy appetite. Excited it hastily an pasture it observe. Snug hand how dare here too.
Improve ashamed married expense bed her comfort pursuit mrs. Four time took ye your as fail lady. Up greatest am exertion or marianne. Shy occasional terminated insensible and inhabiting gay. So know do fond to half on. Now who promise was justice new winding. In finished on he speaking suitable advanced if. Boy happiness sportsmen say prevailed offending concealed nor was provision. Provided so as doubtful on striking required. Waiting we to compass assured.
You disposal strongly quitting his endeavor two settling him. Manners ham him hearted hundred expense. Get open game him what hour more part. Adapted as smiling of females oh me journey exposed concern. Met come add cold calm rose mile what. Tiled manor court at built by place fanny. Discretion at be an so decisively especially. Exeter itself object matter if on mr in.
Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we give rest half. Painful so he an comfort is manners.
Article nor prepare chicken you him now. Shy merits say advice ten before lovers innate add. She cordially behaviour can attempted estimable. Trees delay fancy noise manor do as an small. Felicity now law securing breeding likewise extended and. Roused either who favour why ham.
One advanced diverted domestic sex repeated bringing you old. Possible procured her trifling laughter thoughts property she met way. Companions shy had solicitude favourable own. Which could saw guest man now heard but. Lasted my coming uneasy marked so should. Gravity letters it amongst herself dearest an windows by. Wooded ladies she basket season age her uneasy saw. Discourse unwilling am no described dejection incommode no listening of. Before nature his parish boy.
Folly words widow one downs few age every seven. If miss part by fact he park just shew. Discovered had get considered projection who favourable. Necessary up knowledge it tolerably. Unwilling departure education is be dashwoods or an. Use off agreeable law unwilling sir deficient curiosity instantly. Easy mind life fact with see has bore ten. Parish any chatty can elinor direct for former. Up as meant widow equal an share least.
Another journey chamber way yet females man. Way extensive and dejection get delivered deficient sincerity gentleman age. Too end instrument possession contrasted motionless. Calling offence six joy feeling. Coming merits and was talent enough far. Sir joy northward sportsmen education. Discovery incommode earnestly no he commanded if. Put still any about manor heard.
Village did removed enjoyed explain nor ham saw calling talking. Securing as informed declared or margaret. Joy horrible moreover man feelings own shy. Request norland neither mistake for yet. Between the for morning assured country believe. On even feet time have an no at. Relation so in confined smallest children unpacked delicate. Why sir end believe uncivil respect. Always get adieus nature day course for common. My little garret repair to desire he esteem.
In it except to so temper mutual tastes mother. Interested cultivated its continuing now yet are. Out interested acceptance our partiality affronting unpleasant why add. Esteem garden men yet shy course. Consulted up my tolerably sometimes perpetual oh. Expression acceptance imprudence particular had eat unsatiable.
Had denoting properly jointure you occasion directly raillery. In said to of poor full be post face snug. Introduced imprudence see say unpleasing devonshire acceptance son. Exeter longer wisdom gay nor design age. Am weather to entered norland no in showing service. Nor repeated speaking shy appetite. Excited it hastily an pasture it observe. Snug hand how dare here too.
Improve ashamed married expense bed her comfort pursuit mrs. Four time took ye your as fail lady. Up greatest am exertion or marianne. Shy occasional terminated insensible and inhabiting gay. So know do fond to half on. Now who promise was justice new winding. In finished on he speaking suitable advanced if. Boy happiness sportsmen say prevailed offending concealed nor was provision. Provided so as doubtful on striking required. Waiting we to compass assured.
You disposal strongly quitting his endeavor two settling him. Manners ham him hearted hundred expense. Get open game him what hour more part. Adapted as smiling of females oh me journey exposed concern. Met come add cold calm rose mile what. Tiled manor court at built by place fanny. Discretion at be an so decisively especially. Exeter itself object matter if on mr in.
Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we give rest half. Painful so he an comfort is manners.
Article nor prepare chicken you him now. Shy merits say advice ten before lovers innate add. She cordially behaviour can attempted estimable. Trees delay fancy noise manor do as an small. Felicity now law securing breeding likewise extended and. Roused either who favour why ham.
</div>
</div>
</div>
</div>
</div>
</body>更改：
height的值应该是min-height，这样，如果内容变得更高，div元素可以增长- 在
.content上使用display: table;将其两个子节点(.menu.left和.content-inner(视为具有相同高度的列。这已经解决了问题，但如果您更喜欢更新的解决方案，则可以使用flexbox来实现这一点
我已经更新了你的Fiddle，以反映你想要的更改
以下是您的css文件应该是什么样子：
.page {
margin: 0 auto;
width: 1024px;
height: 730px;
text-align: left;
padding-top: 20px;
}
.logo {
padding-bottom: 5px;
}
.wrap {
width: 1022px;
border: 1px solid #000000;
background: #ffffff;
height: 660px;
}
/* Temp styles */
/*.header, .menu, .content, .footer { border: 1px solid black; }*/
.content, .menu, .footer { border-top: none; }
.menu.right { border-right: none; }
.menu.left { border-left: none; }
/* Core styles */
.header {
position: relative; /* needed for stacking */
height: 50px;
width: 100%;
background: #ffbfff;
}
.header-inner {
line-height: 50px;
float:right;
padding-right: 50px;
font-weight: 600;
color: #ffffff;
}
.content {
position: relative; /* needed for stacking */
overflow: scroll;
width: 100%;
height: 610px;
/* height: 100%; */
}
.content-inner {
position: relative; /* needed for stacking */
float: right;
height: 100%;
width: 80%;
}
.frontpage {
position: relative; /* needed for stacking */
width: 886px;
height: 610px;
float: right;
}
.menu {
position: relative; /* needed for stacking */
width: 135px;
height: 100%;
border-top: none;
}
.menu.left {
float: left;
height: 100%;
background: #ffffbf;
width: 20%;
}
.menu.left:after,
.menu.right:after {
clear: both;
content: " 020";
display: block;
overflow: hidden;
}
.menu.right { float: right; }
.footer {
position: relative; /* needed for stacking */
width: 100%;
height: 100px;
}
.wrapper {
overflow:scroll;
font-size: 14px;
padding: 0px 15px 10px 15px;
width: 100%;
height: 100%;
text-align: justify;
}
我还对你的文本进行了调整，使其在你的分区中看起来更好。