Как я могу сделать div 100% фиксированной высоты?

Question

Как я могу сделать div 100% фиксированной высоты?

Я хочу, чтобы div с высотой 100%, но фиксированной позиции, как справа на этом сайте: http://www.dast2.com/

Я знаю, что это необходимо: высота:100%; Положение: фиксированный;

но это не работает для меня.

4

css position fixed

Источник

user4008903 20 сен '14 в 11:50

5 ответов

Другие вопросы по тегам css position fixed

user1255092 06 сен '16 в 12:22 2016-09-06 12:22 · Answer 1 · 2016-09-06 12:22

Старый, но здесь это идет:

div#sidebar {
   position: fixed;
   top: 0px;
   bottom: 0px
}

4

Источник

user1255092 06 сен '16 в 12:22

user2555887 20 сен '14 в 11:59 2014-09-20 11:59 · Answer 2 · 2014-09-20 11:59

Попробуй это:

<body>

  <div id="sidebar">

  </div>

</body>
<style>

div#sidebar {
  position: fixed;
  background-color : #00FF00;
  height: 100%;
  width: 300px;
  overflow: hidden;
}

</style>

вот живое демо

3

Источник

user2555887 20 сен '14 в 11:59

user8890065 08 дек '18 в 04:53 2018-12-08 04:53 · Answer 3 · 2018-12-08 04:53

.bg-container{ 
  position: fixed;
  width: 100%;
  height: 100%; 
}

2

Источник

user8890065 08 дек '18 в 04:53

user12917078 26 авг '20 в 07:05 2020-08-26 07:05 · Answer 4 · 2020-08-26 07:05

Использование vh:

Высота области просмотра (vh). Эта единица измерения зависит от высоты области просмотра. Значение 1vh равно 1% высоты области просмотра.

height: 100vh;

2

Источник

user12917078 26 авг '20 в 07:05

user2347434 20 сен '14 в 13:30 2014-09-20 13:30 · Answer 5 · 2014-09-20 13:30

Браузеры не очень хорошо рассчитывают высоту.height: auto означает "получить ту же высоту, что и ваш контент". Но height: 100% не всегда хорошо играет, потому что содержимое элемента определяет его высоту. Так что рост тела определяется его содержанием. Поэтому, когда вы даете указание вашему контенту иметь height: 100%Вы указываете, что он имеет ту же высоту, что и тело, но тело имеет такую же высоту, что и содержимое, поэтому вы указываете, что он должен быть таким же высоким, как и он сам.

Вы должны предоставить высоту body и html (корневой элемент).

В этом случае я сделал демо, которое я предоставил элемент HTML насмешкой height: 10000px,

Для боковой панели (красного цвета) вам нужно только min-height: 100% имущество. Боковая панель займет все свое вертикальное пространство, как вы можете видеть в демонстрации ниже. Только что добавлен position: fixed; а также right:0 чтобы исправить это справа.

Вот демо

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

Ура!

user3986836 20 сен '14 в 11:58 2014-09-20 11:58 · Answer 6 · 2014-09-20 11:58

html, body{height:100%;}

следуй этому и отдай 100% диву

0

Источник

user3986836 20 сен '14 в 11:58

user2385767 01 янв '19 в 12:31 2019-01-01 12:31 · Answer 7 · 2019-01-01 12:31

Я думаю, что один из контейнеров принимает max-width, проверьте все контейнеры в вас. Я думаю, что один из контейнеров принимает свойство max-width, проверьте контейнер, который содержит div.

0

Источник

user2385767 01 янв '19 в 12:31

user1766219 20 сен '14 в 12:07 2014-09-20 12:07 · Answer 8 · 2014-09-20 12:07

Вам нужно иметь "Display: block", чтобы он работал.

HTML:

<body>
  <div class="container">
    <div class="content">
      <p>Top bit</p>
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <p>Some content</p>
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <p>Bottom bit</p>
    </div>
    <div class="fullHeight sidebar">
      <h1>Sticky sidebar</h1>
    </div>
  </div>
</body>

CSS:

.container   {width: 1000px; margin: 0 auto; overflow: hidden; position: relative;}
.content     {width: 690; float: left; position: relative;}
.fullHeight  {height: 100%; display: block; overflow: hidden; position: fixed; width: 300px; background: red; right: 0; top: 0;}

Я сделал фон красным, чтобы вы могли скопировать этот код, чтобы увидеть, работает ли он. Я должен признать, что я не проверял это; но я вполне уверен, что это делает свое дело. Дайте мне знать, если это не сработает; тогда я проверю и исправлю это.

И не забывайте иметь "Положение: относительное"; на элементе, который фиксированный элемент внутри - так что он "знает", к чему он должен быть фиксирован относительно. Если он не находится внутри контейнера или чего-либо (как у меня выше), тогда вы можете поставить "Position:lative;" на бирке тела; вот так:

body  {position: relative;}