html - 2 列内容不同,但高度相同

标签 html css height multiple-columns

我想让左右两列的高度相同。无论左边或右边的内容多了,另一个都应该调整到更高的。我知道,我可以使用一些 jQuery 来做到这一点,但我只需要使用 CSS 和 HTML 来处理这个问题。

看看这段代码:

body,
html {
  margin: 0 auto;
}
#szablon {
  width: 980px;
  margin-left: auto;
  margin-right: auto;
}
#header {
  width: 980px;
  height: 350px;
  background: #ff6a00;
}
#szablon_lewa {
  float: left;
  width: 70%;
  background: #808080;
  height: 100%;
}
#szablon_prawa {
  float: right;
  width: 30%;
  background: #bababa;
  height: 100%;
}
#stopka {
  clear: both;
  width: 100%;
  height: 200px;
  background: #000;
}
p {
  padding: 10px;
}
<div id="szablon">
  <div id="header"></div>
  <div id="szablon_lewa">
    <p>
      Na początku był pomysł, by zdobyć swoimi trikami najbardziej ośnieżone szczyty i uchwycić to na filmie. Trzech śmiałków, jeden cel i jeden zasadniczy problem - brak śniegu. Dlatego cała trójka wyruszyła w podróż przez Europę, w pogoni za zimowym puchem.
      Tak powstał niesamowity materiał ​Crew Movie Project - "The Short Story About The Bad Winter". Przed kamerą stanęli Bartek Sibiga i Marcin Pośpiech. Ich jazdę i niebezpieczne wyczyny sfilmował Michał Schwierc, reżyser dokumentu. Tuż przed warszawską
      premierą w Kinotece, Michał zdradził mi historie wspólnej podróży. VICE: Przedstaw bohaterów swojego filmu. ​Michał Schwierc: Najlepsi w swoim fachu. Bartek Sibiga, aktualny mistrz Polski w Big Air oraz Marcin Pośpiech, wielokrotny zwycięzca wielu
      prestiżowych zawodów jibowych. Świetnie się uzupełniali. Kiedy się poznaliście i w jakich okolicznościach? ​Z Marcinem poznałem się w kwietniu zeszłego roku na jednym z wyjazdów studenckich w Livigno IT. Marcin był tam instruktorem narciarskim,
      a ja robiłem relację filmową z całego wyjazdu. Natomiast z Bartkiem zapoznałem się dopiero przy rozmowach o naszym wspólnym projekcie filmowym. Jakbyś ich opisał, jak Ci się z nimi pracowało, czym się różnią? ​Tak jak wcześniej wspomniałem, dobrze
      się wszyscy uzupełnialiśmy. Zrobienie takiego filmu w zasadzie tylko w trzy osoby to ciężka misja. Każdy czuwał piecze na tym projektem. Marcin jest perfekcjonistą w każdym calu, wszystko musi być dopracowane, począwszy od przygotowania miejsca,
      zrobienia idealnego przejazdu aż po końcowe ujęcie, które również musiałem wykonać jak najlepiej. Jak postanowił ciężko było go przegadać. Bartek natomiast to taki pozytywny luzak. Jak czasem były napięte sytuacje to potrafił je szybko załagodzić.
      Również u niego wszystko musiało być dopracowane i siedzieć stu procentowo. Świetnie mi się z nimi pracowało, gdyż ja tak samo jak oni, ustawiam sobie poprzeczkę bardzo wysoko. Każdy siebie napędzał i myślę że widać to na ekranie
    </p>
  </div>
  <div id="szablon_prawa">
    <p>
      Na początku był pomysł, by zdobyć swoimi trikami najbardziej ośnieżone szczyty i uchwycić to na filmie. Trzech śmiałków, jeden cel i jeden zasadniczy problem - brak śniegu. Dlatego cała trójka wyruszyła w podróż przez Europę, w pogoni za zimowym puchem.
      Tak powstał niesamowity materiał ​Crew Movie Project - "The Short Story About The Bad Winter". Przed kamerą stanęli Bartek Sibiga i Marcin Pośpiech. Ich jazdę i niebezpieczne wyczyny sfilmował Michał Schwierc, reżyser dokumentu. Tuż przed warszawską
      premierą w Kinotece, Michał zdradził mi historie wspólnej podróży. VICE: Przedstaw bohaterów swojego filmu. ​Michał Schwierc: Najlepsi w swoim fachu. Bartek Sibiga, aktualny mistrz Polski w Big Air oraz Marcin Pośpiech, wielokrotny zwycięzca wielu
      prestiżowych zawodów jibowych. Świetnie się uzupełniali. Kiedy się poznaliście i w jakich okolicznościach? ​Z Marcinem poznałem się w kwietniu zeszłego roku na jednym z wyjazdów studenckich w Livigno IT. Marcin był tam instruktorem narciarskim,
      a ja robiłem relację filmową z całego wyjazdu. Natomiast z Bartkiem zapoznałem się dopiero przy rozmowach o naszym wspólnym projekcie filmowym. Jakbyś ich opisał, jak Ci się z nimi pracowało, czym się różnią? ​Tak jak wcześniej wspomniałem, dobrze
      się wszyscy uzupełnialiśmy. Zrobienie takiego filmu w zasadzie tylko w trzy osoby to ciężka misja. Każdy czuwał piecze na tym projektem. Marcin jest perfekcjonistą w każdym calu, wszystko musi być dopracowane, począwszy od przygotowania miejsca,
      zrobienia idealnego przejazdu aż po końcowe ujęcie, które również musiałem wykonać jak najlepiej. Jak postanowił ciężko było go przegadać. Bartek natomiast to taki pozytywny luzak. Jak czasem były napięte sytuacje to potrafił je szybko załagodzić.
      Również u niego wszystko musiało być dopracowane i siedzieć stu procentowo. Świetnie mi się z nimi pracowało, gdyż ja tak samo jak oni, ustawiam sobie poprzeczkę bardzo wysoko. Każdy siebie napędzał i myślę że widać to na ekranie
    </p>
  </div>
  <div id="stopka"></div>
</div>

最佳答案

您可以删除 float 并将显示设置为 table-cell:

body,
html {
  margin: 0 auto;
}
#szablon {
  width: 980px;
  margin-left: auto;
  margin-right: auto;
}
#header {
  width: 980px;
  height: 350px;
  background: #ff6a00;
}
#szablon_lewa {
  display: table-cell;/*change display to table cell*/
  width: 70%;
  background: #808080;
  height: 100%;
}
#szablon_prawa {
  display: table-cell;/*change display to table cell*/
  width: 30%;
  background: #bababa;
  height: 100%;
}
#stopka {
  clear: both;
  width: 100%;
  height: 200px;
  background: #000;
}
p {
  padding: 10px;
}
<div id="szablon">
  <div id="header"></div>
  <div id="szablon_lewa">
    <p>
      Na początku był pomysł, by zdobyć swoimi trikami najbardziej ośnieżone szczyty i uchwycić to na filmie. Trzech śmiałków, jeden cel i jeden zasadniczy problem - brak śniegu. Dlatego cała trójka wyruszyła w podróż przez Europę, w pogoni za zimowym puchem.
      Tak powstał niesamowity materiał ​Crew Movie Project - "The Short Story About The Bad Winter". Przed kamerą stanęli Bartek Sibiga i Marcin Pośpiech. Ich jazdę i niebezpieczne wyczyny sfilmował Michał Schwierc, reżyser dokumentu. Tuż przed warszawską
      premierą w Kinotece, Michał zdradził mi historie wspólnej podróży. VICE: Przedstaw bohaterów swojego filmu. ​Michał Schwierc: Najlepsi w swoim fachu. Bartek Sibiga, aktualny mistrz Polski w Big Air oraz Marcin Pośpiech, wielokrotny zwycięzca wielu
      prestiżowych zawodów jibowych. Świetnie się uzupełniali. Kiedy się poznaliście i w jakich okolicznościach? ​Z Marcinem poznałem się w kwietniu zeszłego roku na jednym z wyjazdów studenckich w Livigno IT. Marcin był tam instruktorem narciarskim,
      a ja robiłem relację filmową z całego wyjazdu. Natomiast z Bartkiem zapoznałem się dopiero przy rozmowach o naszym wspólnym projekcie filmowym. Jakbyś ich opisał, jak Ci się z nimi pracowało, czym się różnią? ​Tak jak wcześniej wspomniałem, dobrze
      się wszyscy uzupełnialiśmy. Zrobienie takiego filmu w zasadzie tylko w trzy osoby to ciężka misja. Każdy czuwał piecze na tym projektem. Marcin jest perfekcjonistą w każdym calu, wszystko musi być dopracowane, począwszy od przygotowania miejsca,
      zrobienia idealnego przejazdu aż po końcowe ujęcie, które również musiałem wykonać jak najlepiej. Jak postanowił ciężko było go przegadać. Bartek natomiast to taki pozytywny luzak. Jak czasem były napięte sytuacje to potrafił je szybko załagodzić.
      Również u niego wszystko musiało być dopracowane i siedzieć stu procentowo. Świetnie mi się z nimi pracowało, gdyż ja tak samo jak oni, ustawiam sobie poprzeczkę bardzo wysoko. Każdy siebie napędzał i myślę że widać to na ekranie
    </p>
  </div>
  <div id="szablon_prawa">
    <p>
      Na początku był pomysł, by zdobyć swoimi trikami najbardziej ośnieżone szczyty i uchwycić to na filmie. Trzech śmiałków, jeden cel i jeden zasadniczy problem - brak śniegu. Dlatego cała trójka wyruszyła w podróż przez Europę, w pogoni za zimowym puchem.
      Tak powstał niesamowity materiał ​Crew Movie Project - "The Short Story About The Bad Winter". Przed kamerą stanęli Bartek Sibiga i Marcin Pośpiech. Ich jazdę i niebezpieczne wyczyny sfilmował Michał Schwierc, reżyser dokumentu. Tuż przed warszawską
      premierą w Kinotece, Michał zdradził mi historie wspólnej podróży. VICE: Przedstaw bohaterów swojego filmu. ​Michał Schwierc: Najlepsi w swoim fachu. Bartek Sibiga, aktualny mistrz Polski w Big Air oraz Marcin Pośpiech, wielokrotny zwycięzca wielu
      prestiżowych zawodów jibowych. Świetnie się uzupełniali. Kiedy się poznaliście i w jakich okolicznościach? ​Z Marcinem poznałem się w kwietniu zeszłego roku na jednym z wyjazdów studenckich w Livigno IT. Marcin był tam instruktorem narciarskim,
      a ja robiłem relację filmową z całego wyjazdu. Natomiast z Bartkiem zapoznałem się dopiero przy rozmowach o naszym wspólnym projekcie filmowym. Jakbyś ich opisał, jak Ci się z nimi pracowało, czym się różnią? ​Tak jak wcześniej wspomniałem, dobrze
      się wszyscy uzupełnialiśmy. Zrobienie takiego filmu w zasadzie tylko w trzy osoby to ciężka misja. Każdy czuwał piecze na tym projektem. Marcin jest perfekcjonistą w każdym calu, wszystko musi być dopracowane, począwszy od przygotowania miejsca,
      zrobienia idealnego przejazdu aż po końcowe ujęcie, które również musiałem wykonać jak najlepiej. Jak postanowił ciężko było go przegadać. Bartek natomiast to taki pozytywny luzak. Jak czasem były napięte sytuacje to potrafił je szybko załagodzić.
      Również u niego wszystko musiało być dopracowane i siedzieć stu procentowo. Świetnie mi się z nimi pracowało, gdyż ja tak samo jak oni, ustawiam sobie poprzeczkę bardzo wysoko. Każdy siebie napędzał i myślę że widać to na ekranie
    </p>
  </div>
  <div id="stopka"></div>
</div>

关于html - 2 列内容不同,但高度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26788400/

相关文章:

javascript - 我怎样才能使这个图像映射元素响应?

javascript - svg 大小不适用于 javascript

javascript - 关闭模态时的 CSS 动画

javascript - 如何制作动画多色进度条?

html - 当用户最小化浏览器窗口时,如何使我的 CSS/HTML 类别菜单优雅地最小化?

php - 从服务器目录填充选择 PHP jQuery AJAX

html - 即使减小浏览器的宽度,如何将页脚保持在屏幕底部?

java - 如何停止影响其他内容的 CSS 到我们的站点?

javascript - 制作一个 div 填充页面的其余部分(跨浏览器)

jquery在加载时获取iframe内容的高度