Разметка колонок CSS - DIV с динамической шириной и высотой, равной высоте брата

Question

Разметка колонок CSS - DIV с динамической шириной и высотой, равной высоте брата

0

Я действительно натолкнулся на эту стену и нуждаюсь в некоторой помощи. Я пытаюсь создать раскладку из двух столбцов с шириной и высотой, скорректированной на содержимое левого столбца. Кажется, это довольно простой макет, но я начинаю думать, что это невозможно сделать (не прибегая к JS).

Эта скрипка описывает то, что я пытаюсь сделать. Это контейнер DIV с двумя DIV внутри, выровненный по горизонтали. Левый внутренний DIV должен регулировать свой размер (как ширину, так и высоту) до его содержимого. Правильный внутренний DIV (который содержит карту Google) должен иметь ту же высоту, что и левая, при заполнении оставшейся ширины контейнера.

<div id="container">
    <div id="left">
        This DIV should adjust<br/>
        both its width and height<br/>
        to its content, not taking up<br/>
        more space than needed!<br/>
        <br/><br/><br/>
        More content here...
    </div>
    <div id="right">
        Google Map here.
    </div>
</div>

Я пробовал все, что знаю, и все трюки, которые я нашел, но не успел!

#container {
    background-color: #EEE;
    overflow: hidden;
}
#container div {
    border: 1px solid black;
    padding: 5px;
}
#left {
    background-color: lightblue;
    display: inline-block;
    float: left;
}
#right {
    background-color: lightgreen;
    height: 100%; /* THIS IS WHAT I WANT, BUT IT WON'T WORK, OF COURSE */
    overflow: hidden;
}

Я нашел много похожих вопросов, но во всех этих случаях левый столбец DIV/имел фиксированную ширину, что делает его намного проще.

Любой вход очень ценится, особенно если он работает в IE9+ (и современных браузерах)!

редактировать

Некоторые разъяснения. Цель правой колонки - удерживать карту Google, и, следовательно, карта должна заполнить весь DIV. Попробуйте установить фиксированную высоту (например, 100px) для #right в скрипке, с которой я ссылаюсь выше, и вы увидите, что карта отображается.

lindsten 20 апр. 2014, в 22:56

Источник

Теги:

html

css

2 ответа

Ещё вопросы

W.D. · Answer 1 · 2014-04-20T18-09-00.000Z

Вот что я придумал → ссылка

Когда вы удаляете свойство overflow вашего #right div оно растягивается, как ожидалось. Однако в этом случае вы не сможете скрыть переполненный контент.

CSS

#right {
    background-color: lightgreen;
    height: 100%; /* THIS WON'T WORK */  // height works as expected      
}

Это не работает Возможно, это не совсем понятно из моего описания, но карта Google должна заполнить правильный столбец. Попробуйте установить фиксированную высоту (например, 100 пикселей) в скрипке, с которой я связался в своем вопросе.

Jay M · Answer 2 · 2014-04-20T17-27-00.000Z

jsfiddle demo

css:

    .container {
    overflow: hidden;
    background-color: #EEE;
}
.column {
    float: left;
    background-color: grey;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}


p {
    padding: 10px;
    margin-top: 10px;
    width: 50%;
}

HTML

    <script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>


<div class="container">

<div class="column">

        This DIV should adjust<br/>
        both its width and height<br/>
        to its content, not taking up<br/>
        more space than needed!<br/>
        <br/><br/><br/>
        More content here...

</div>

<div class="column">

<div id="map"></div>

</div>

</div>

<p>
    The right DIV (which contains a Google Map)
    should be the same height as the left DIV,
    while filling up the remaining width.
</p>
<p>How to do that?</p>

Это не работает Возможно, это не совсем понятно из моего описания, но карта Google должна заполнить правильный столбец. Попробуйте установить фиксированную высоту (например, 100 пикселей) в скрипке, с которой я связался в своем вопросе.