Как сделать дочерние divs всегда подходящими внутри родительского div?

Мой вопрос в том, есть ли способ, не используя javascript, чтобы дочерние divs расширялись до границ своего родителя, не превышая эти границы, когда вы не можете заранее знать размер родительского div?Как сделать дочерние divs всегда подходящими внутри родительского div?

Ниже приведен образец разметки/стилей, демонстрирующий мою проблему. Если вы загрузите его в браузер, вы увидите, что #two и #three оба выходят за пределы их родителя, #one и вызывают появление полос прокрутки.

Моя проблема заключается не столько в полосах прокрутки, сколько в том, что я не знаю, как рассказать дочерние divs о том, чтобы они занимали только ширину или высоту, а не всю высоту или ширину родителя.

<html> 
<head> 
<style> 
html, body {width:100%;height:100%;margin:0;padding:0;} 
.border {border:1px solid black;} 
.margin { margin:5px;} 
#one {width:100%;height:100%;} 
#two {width:100%;height:50px;} 
#three {width:100px;height:100%;} 
</style> 
</head> 
<body> 
    <div id="one" class="border"> 
     <div id="two" class="border margin"></div> 
     <div id="three" class="border margin"></div> 
    </div> 
</body>

источник

2009-07-08 Tim Sheiner

вы могли бы использовать наследование

#one {width:500px;height:300px;} 
#two {width:inherit;height:inherit;} 
#three {width:inherit;height:inherit;}

источник

2009-07-08 14:01:03 Silfverstrom

Я не думаю, что работает. Ну, по крайней мере, если это единственные изменения, которые вы совершаете. – thebrokencube

Я не мог наблюдать никаких изменений с оригинала при использовании этих стилей. –

В вашем примере, вы не можете: 5px margin добавляется в ограничительной рамки div#two и div#three эффективно делая их ширину и высоту 100 % от родительского + 5px, который будет переполняться.

Вы можете использовать padding на родительский элемент для обеспечения там 5px пространства внутри его границ:

<style> 
    html, body {width:100%;height:100%;margin:0;padding:0;} 
    .border {border:1px solid black;} 
    #one {padding:5px;width:500px;height:300px;} 
    #two {width:100%;height:50px;} 
    #three {width:100px;height:100%;} 
</style>

EDIT: Во время тестирования, удаление width:100% из div#two будет на самом деле пусть она работает должным образом как div s блочно -level и всегда будут заполнять ширины своих родителей по умолчанию. Это должно очистить ваш первый случай, если вы хотите использовать маржу.

источник

2009-07-08 14:06:43 ajm

Или же придерживаться процентных соотношений: использование процентного поля и процентной ширины/высоты также будет делать трюк, когда вы работаете с теми же «единицами». Тем не менее, вы получите 100% -ную высоту, потому что там есть еще один ребенок, использующий часть высоты родителей. – ajm

Это не совсем работает, высота: 100% в #three всегда будет переполнять родительский контейнер. –

Да, как я сказал в своем комментарии, высота 100% будет переполняться каждый раз. Что-то вроде 2-процентной маржи на #two и # три, высота 10% на # 2 и высота 82% на # три могут сделать трюк. – ajm

Если я понял вас правильно, самым простым методом является плавание детей. Например:

#one { width: 500px; height: 1%; overflow: hidden; background: red; } 
#two { float: left; width: 250px; height: 400px; background: aqua; } 
#two { float: left; width: 250px; height: 200px; background: lime; }

Установка размера (высота/ширина) и переполнение Авто или скрытый на родительский элемент заставляет его содержать плыли дочерние элементы.

Обратите внимание, что переполнение: скрыто; может иногда вызывать проблемы с содержанием получать отрезаны, в этом случае вы можете попробовать этот альтернативный метод:

http://www.positioniseverything.net/easyclearing.html

источник

2009-07-08 14:08:27

Это заставляет вас устанавливать высоту содержащихся элементов, а не устанавливать высоту контейнера и делать растянутые элементы эластичными. –

Этот вид работ, но обрезает нижнюю часть длинного дочернего элемента, не делает его «подходящим» внутри родителя. –

Для ширины это легко, просто удалите width: 100% правило. По умолчанию div будет растягиваться, чтобы соответствовать родительскому контейнеру.

Высота не такая простая. Вы могли бы сделать что-то вроде equal height column trick.

html, body {width:100%;height:100%;margin:0;padding:0;} 
.border {border:1px solid black;} 
.margin { margin:5px;} 
#one {width:500px;height:300px; overflow: hidden;} 
#two {height:50px;} 
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}

источник

2009-07-08 14:10:56

. Этот также обрезает длинный дочерний div, но не делает его укороченным, чтобы соответствовать внутри родителя с требуемым краем внизу. –

Для закрытия, я думаю, что ответ на этот вопрос заключается в том, что решения нет. Единственный способ получить поведение, которое я хочу, - это javascript.

источник

2009-07-16 19:55:59

См. Мой ответ. Я действительно предлагаю два разных способа сделать это. – Ryan

Часто таблицы могут легко делать то, что divs требует совершения обруча. К сожалению, divs попали в CSS очень плохо продуманы. – fyngyrz

Если вы хотите, чтобы дочерние divs соответствовали размеру родителя, вы должны поместить маркер по крайней мере в размере дочерних границ дочерних div (child.margin >= child.bordersize).

Для этого примера просто удалите ширина: 100%; и высота: 100% в #one и удалите ширина: 100% в #two. Это должно быть что-то вроде этого:

html, body {width:100%; height:100%; margin:0; padding:0;}  
.border {border:1px solid black;} 
.margin {margin:5px;} 
\#one {} 
\#two {height:50px;}  
\#three {width:100px; height:100%;}

источник

2011-02-11 20:13:17 Wade

У меня была аналогичная проблема, но в моем случае, у меня есть содержание в моем DIV, что высота мудрый будет превышать границы родительского дел. Когда это произойдет, я хочу, чтобы он автоматически прокручивался. Мне удалось это сделать, используя

.vscrolling_container { height: 100%; overflow: auto; }

источник

2011-04-11 22:18:33 meem

Это последний попыток было бы хорошо. Но если у попытаться вставить текст у увидите, что текст будет превышать границы

источник

2013-02-11 16:39:46 ABA

Пожалуйста, отправьте ответ, если он ответит на исходный вопрос. Если вы просто хотите прокомментировать что-то из ответа или вопроса, добавьте комментарий вместо этого. –

можно использовать display: inline-block;

надеюсь, что это полезно.

источник

2013-10-28 09:48:09

Есть два метода, обычно используемые для этого:

Абсолютное позиционирование
Таблица стилей

Учитывая HTML вы предоставили здесь решение, используя абсолютное позиционирование:

body #one { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: auto; 
 
    height: auto; 
 
} 
 
body #two { 
 
    width: auto; 
 
} 
 
body #three { 
 
    position: absolute; 
 
    top: 60px; 
 
    bottom: 0; 
 
    height: auto; 
 
}

<html> 
 
<head> 
 
<style> 
 
html, body {width:100%;height:100%;margin:0;padding:0;} 
 
.border {border:1px solid black;} 
 
.margin { margin:5px;} 
 
#one {width:100%;height:100%;} 
 
#two {width:100%;height:50px;} 
 
#three {width:100px;height:100%;} 
 
</style> 
 
</head> 
 
<body> 
 
\t <div id="one" class="border"> 
 
\t \t <div id="two" class="border margin"></div> 
 
\t \t <div id="three" class="border margin"></div> 
 
\t </div> 
 
</body

Вы всегда можете просто использовать элементы таблицы, tr и td, невзирая на общую критику, поскольку она выполнит свою работу. Если вы предпочитаете использовать CSS, для colspan эквивалент не эквивалентен, поэтому вы, вероятно, окажетесь вложенными таблицами. Вот пример:

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
#one { 
 
    box-sizing: border-box; 
 
    display: table; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
} 
 
#two { 
 
    box-sizing: border-box; 
 
    display: table; 
 
    height: 50px; 
 
    padding: 5px; 
 
    width: 100%; 
 
} 
 
#three { 
 
    box-sizing: border-box; 
 
    display: table; 
 
    height: 100%; 
 
    padding-bottom: 60px; 
 
    padding-left: 5px; 
 
    
 
} 
 
#four { 
 
    display: table-cell; 
 
    border: 1px solid black; 
 
} 
 
#five { 
 
    display: table-cell; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
} 
 
#six { 
 
    display: table-cell; 
 
}

<html> 
 
\t <div id="one"> 
 
\t  <div id="two"> 
 
      <div id="four"></div> 
 
     </div> 
 
     <div id="three"> 
 
      <div id="five"></div> 
 
      <div id="six"></div> 
 
     </div> 
 
\t </div> 
 
    </html>

источник

2016-09-14 17:07:38 Ryan

Убедитесь, что внешний DIV имеет следующие свойства CSS:

.outer { 
    /* ... */ 
    height: auto; 
    overflow: hidden; 
    /* ... */ 
}

источник

2017-07-10 01:41:44

Как сделать дочерние divs всегда подходящими внутри родительского div?

ответ

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