CSS делает div на 100% шириной, соответствующей телу, а не родительскому div - PullRequest
Новая
       7

CSS делает div на 100% шириной, соответствующей телу, а не родительскому div

6 голосов
/ 31 октября 2011

у меня 

<div style="position:relative; width:500px;">
    <div style="position:absolute; width:100%"></div>
</div>

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

Ответы [ 2 ]

2 голосов
/ 31 октября 2011

Единственный способ сделать это, сохраняя относительное и абсолютное позиционирование, как у вас в коде, - это использовать JavaScript. Вам нужно получить ширину окна и установить ее как ширину div. Вам также нужно определить размер окна при изменении размера, чтобы у вас всегда была настройка div для текущей ширины окна.

Другие 2 способа сделать это, возможно, не варианты, но стоит упомянуть

  1. Поместите дочерний div вне родительского div.
  2. Или установите его в фиксированное положение. Это может не дать желаемого эффекта. Div всегда будет в том же положении независимо от прокрутки страницы.
0 голосов
/ 04 апреля 2018

Современные браузеры имеют поддержку для блоков просмотра . 

header {
    width: 50%;
    background-color: lightblue;
    padding: 20px 0;
}

nav {
    width: 100vw;
    background-color: orange;
    padding: 20px 0;
}
  <html>
  <body>
  
  <header>
    <p>This inherits the width of the parent like normal.</p>
    
    <nav>
      <a href="/">this fills the viewport</a>
    </nav>
  </header>
  
  </body>
  </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...