2014-11-06 4 views
4

Я хочу, чтобы обе левые и правые столбцы имеют одинаковую высоту. Независимо от того, есть ли больше контента в левой или правой части, другой должен приспособиться к более высокому. Я знаю, я могу сделать это с помощью некоторого jQuery, но мне нужно иметь дело с этим только с помощью CSS и HTML.2 колонки с различным содержанием, но с той же высоте

Посмотрите на этот код:

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>

ответ

3

Вы можете удалить 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>

+1

работает как шарм! спасибо. –

Смежные вопросы