Question

我的布局左侧是图像，右侧是标签菜单。我希望图像和文本总是占据宽度的50％（除非浏览器窗口太小，在这种情况下图像和选项卡式菜单堆叠在一起），这意味着两者都应自动调整大小。图像和选项卡菜单设置为两列：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

此处完整运行代码：fiddle

现在，我的问题是我希望任何标签的内容高度都限制在图像的高度。永远不应该有比左图像高度更低的文本。这意味着如果文本太多，它应该可以滚动。随着查看器窗口重新调整，图像和“允许文本高度”都会被重新调整。应该适应。正如您在小提琴示例中所看到的那样，＆＃34;关于＆＃34;标签目前在图像高度上方向下运行。

Answer 1

您可以在div上使用flex然后定位属性来实现此目的。

将此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;
}

请参阅fiddle

Answer 2

我已经重写了一点代码，以便它可以按照需要运行。此代码完全响应（调整浏览器大小以查看）并支持跨浏览器。

我将背景涂成红色，这样你就可以看到这里发生了什么。我还为此演示将@media all and (max-width:700px)缩减为500，因此它适合stackoverflow窗口。

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>

Answer 3

您应该为tabcontent类提供max-height。

var imageHeight= document.getElementById("img_element").style.height;
document.getElementsByClassName("tabcontent").style.height=imageHeight;

你可以获得img elemet height，而不是tabcontent height

如果使用jquery，它比dom js更容易

{{1}}

Answer 4

只需添加此内容并尝试我希望这可以解决您的问题。

.scroll
{
  height:100vh;
  overflow:hidden;
  }

如果它不起作用只是评论:)记住只需在你的最后一个CSS中添加它。不要删除任何内容。

将div高度限制为图像高度

4 个答案: