Общая ширина задачи DIV - PullRequest
Новая
       4

Общая ширина задачи DIV

0 голосов
/ 27 января 2010

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

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

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

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

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

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

Ответы [ 4 ]

1 голос
/ 27 января 2010

Оставьте ширину на auto. Если вы не делаете что-то вроде плавающего эффекта, теребя его дисплей (чего не следует делать, учитывая то, что вы пытаетесь достичь), это заставит ширину использовать оставшееся пространство.

1 голос
/ 27 января 2010

Как насчет вложения Div? 

<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>

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

0 голосов
/ 27 января 2010

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

.parent {overflow: hidden;}

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

0 голосов
/ 27 января 2010

Для этого есть атрибут box-sizing. См. это руководство .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...