我有一个布局，左侧是图像，右侧是选项卡菜单。我希望图像和文本始终占据宽度的 50%(除非浏览器窗口太小，在这种情况下，图像和选项卡式菜单堆叠在一起(，这意味着两者都应该自动调整大小。图像和选项卡菜单设置为两列：
.col-container {
display: flex;
margin-left: auto;
margin-right: auto;
width: 100%;
clear: both;
}
.col {
flex: 1;
display: table-cell;
padding: 10px;
vertical-align: middle;
}<div class="col-container">
<div class="col" style="background:white">
<img src="https://wallpaperbrowse.com/media/images/4995_Sibl_9780307957900_art_r1.jpg" alt="">
</div>
<div class="col" style="background:white">
<h2>Hello World</h2>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
<button class="tablinks" onclick="openTab(event, 'About')">About</button>
</div>
</div>
</div>完整的运行代码在这里：小提琴
现在，我的问题是我希望任何选项卡的内容高度都限制为图像的高度。文本不应低于左侧图像的高度。这意味着如果文本太多，它应该变得可滚动。随着查看器窗口重新缩放，图像和"允许的文本高度"都应适应。正如您在小提琴示例中看到的那样，"关于"选项卡中的文本当前已超过图像高度。
我已经重写了你的代码，以便它可以按预期工作。此代码是完全响应式的(调整浏览器大小以查看(并支持跨浏览器。
我把背景涂成红色，这样你就能看到这里发生了什么。我还为此演示将@media all and (max-width:700px)减少到 500，因此它适合堆栈溢出窗口。
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}.col-container,
.col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.col-container {
-ms-flex-flow: wrap;
flex-flow: wrap;
}
.col {
background: #b00;
position: relative;
-ms-flex: 1 1 0%;
-webkit-box-flex: 1;
flex: 1 1 0%;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
overflow: hidden;
}
#menu {
position: relative;
-ms-flex: 0 0 auto;
-webkit-box-flex: 0;
flex: 0 0 auto;
background: #fff;
z-index: 10;
}
.scroll {
overflow-y: auto;
position: absolute;
top: 0;
max-height: 100%;
z-index: 5;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
@media all and (max-width:500px) {
.col-container {
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-ms-flex-align: stretch;
-webkit-box-align: stretch;
align-items: stretch;
}
.InputItem,
.col {
-ms-flex: 1 1 auto;
-webkit-box-flex: 1;
flex: 1 1 auto;
text-align: center;
}
.scroll {
position: relative;
padding-top: 0;
}
}<div class="col-container">
<div class="col">
<img id="menuImg" src="https://wallpaperbrowse.com/media/images/4995_Sibl_9780307957900_art_r1.jpg" alt="" width=100%>
</div>
<div class="col">
<div id="menu" class="col">
<h2>Hello World</h2>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
<button class="tablinks" onclick="openTab(event, 'About')">About</button>
</div>
</div>
<div class="content col">
<div id="Home" class="tabcontent scroll">
<h3>Home</h3>
<div>
Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime
hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae
sunt, non sunt tamen ab earum spe causae diligendi profectae. Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem
ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter
ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum. Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur
nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur. Accedebant
enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute
velut filo pendere statum orbis terrarum fictis vocibus exclamabant. Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt
et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus. Ut enim benefici
liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus. Et quia Mesopotamiae
tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta
vastarat. erat autem quod cogitabat huius modi. Sed fruatur sane hoc solacio atque hanc insignem ignominiam, quoniam uni praeter se inusta sit, putet esse leviorem, dum modo, cuius exemplo se consolatur, eius exitum expectet, praesertim cum
in Albucio nec Pisonis libidines nec audacia Gabini fuerit ac tamen hac una plaga conciderit, ignominia senatus. Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus
parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare. Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur
nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur. Oportunum
est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides. Quae dum ita struuntur, indicatum
est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi,
qui atrocium criminum ponderibus urgebantur. Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas
Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit? At
nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri, miraberis numquam antea visus summatem virum tenuem te sic enixius observantem,
ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam. Post hanc adclinis Libano monti Phoenice, regio plena gratiarum et venustatis, urbibus decorata magnis et pulchris; in quibus amoenitate celebritateque nominum Tyros
excellit, Sidon et Berytus isdemque pares Emissa et Damascus saeculis condita priscis.
</div>
</div>
<div id="About" class="tabcontent scroll" style="display:none;">
<h3>About</h3>
<p>Blah.</p>
</div>
</div>
</div>
</div>
</div>
</div>您可以使用 flex，然后将属性放置在div 上来实现此目的。
将此 CSS 添加到您的小提琴中，您就完成了。
.col-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}
.col {
flex: 1;
border: 1px solid red; /*For demo purpose*/
}
.col:nth-child(2) {
position: relative;
overflow: auto;
}
#Home {
position: absolute;
}
#About {
/*This only for the first load. You are anyway changing the display property
on the tab clicks*/
display: none;
}
看小提琴
您应该为 tabcontent 类提供最大高度。
overflow: auto;
max-height: 386px;
你可以得到 img elemet 高度比你可以 et 标签内容高度
如果你使用jQuery，它比DOM JS更容易
。var imageHeight= document.getElementById("img_element").style.height;
document.getElementsByClassName("tabcontent").style.height=imageHeight;
只需添加这个并尝试 我希望这会解决您的问题。
.scroll
{
height:100vh;
overflow:hidden;
}
如果它不起作用，只需评论:)请记住，只需将其添加到最后一个 CSS 中即可。不要删除任何内容。