Общая ширина проблемы с DIV

У меня есть раздел DIV, который хотел бы использовать его как «компонент» в различных контекстах. Для «компонента» я подразумеваю, что он будет автоматически включен в некоторые страницы HTML-страницы, которые невозможно было предвидеть.Общая ширина проблемы с DIV

Необходимое поведение раздела DIV состоит в том, что его ширина должна быть всегда 100%, то есть она должна полностью заполнять родителя. Проблема возникает из-за того, что общая ширина DIV равна сумме внутренней ширины + paddings + margin. Мои отступы для секции DIV являются:

padding-left: 10px; padding-right: 10px;

Вопрос: как я должен установить ширину секции DIV, когда я не знаю, ширину родителя, но хочет быть на 100% ? Существует не что-то вроде 100% - 2 * 10px ...

Предпочтительно, я бы не использовал javascript или JQuery для такого типа макета.

Спасибо заранее,
Златко

источник

2010-01-27 Zlatko

Как насчет вложенности дивы?

<html> 
<head> 
    <title>Div Test</title> 
</head> 
<body> 
    <div class='outerDiv' style=' background-color: red;margin: 0px; padding: 0px 10px;'> 
    <div class='innerDiv' style='width: 100%; background-color: yellow; margin: 0px; padding: 0px;'> 
    Whatever 
    </div> 
    </div> 
</body> 
</html>

Надеюсь, это поможет.

источник

2010-01-27 11:50:17 Yeodave

Оставить ширину на auto. Если вы не делаете что-то вроде того, что плаваете, играя с его дисплеем (чего не следует, учитывая то, что вы пытаетесь достичь), что заставит ширину использовать оставшееся пространство.

источник

2010-01-27 11:53:00 Quentin

Вот что такое атрибут box-sizing. См. this guide.

источник

2010-01-27 11:53:08

Это никогда не будет решением какой-либо проблемы в реальном мире. Я бы порекомендовал забыть, что он даже существует. – U62

Вы можете либо удалить прокладку из компонента, что бы решить вашу проблему напрямую. Тем не менее, я предполагаю, что вы не будете/не можете сделать это по какой-то причине. Поэтому, если компонент div всегда находится внутри родительского div, как насчет того, чтобы скрыть переполнение родительского div. Просто добавьте это в родительский элемент CSS:

.parent {overflow: hidden;}

Теперь все, что течет над родителем, должно быть скрыто.

источник

2010-01-27 12:20:18 Tom

Общая ширина проблемы с DIV

ответ

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