Как растянуть div сверху вниз?

Слушайте, я знаю, что есть много потоков с множеством решений, но ни один из них не работал для меня. Я начинаю, и я только начинаю создавать сайты в HTML. Я пытался сделать сайт раньше, но у меня была такая же проблема. Я удалил предыдущий и сделал новый, и я до сих пор не могу это решить.Как растянуть div сверху вниз?

То, что я пытался и на самом деле не работает:

высота настройка на 100%/100vh (метод один)
установка ДИВ мин-высота до 100%, придав ему положение абсолютного и делает это:
```
top: 0px 

bottom: 0px 
```

(метод два)

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

И когда я делаю метод 2, divs просто исчезают. Я не заставил границу растянуться, чтобы вы все еще могли ее видеть, но если бы я это сделал, это исчезло бы.

И, кстати, я просто начинающий, и я до сих пор даже не знаю основ JavaScript, jQuery и т. Д., Поэтому я хотел бы просто использовать чистый HTML и CSS, а не JavaScript и другие материалы, пока я узнайте их.

EDIT: DIVs необходимо растягивать при добавлении текста, на самом деле это одна из моих основных проблем.

источник

2016-10-04 SaJmoN

Попробуйте это ... Вы можете обезьяны со стилями, чтобы сделать это так, как вы хотите. Я положил вашу границу в .Main и сменил html, body на height: 100%

Примечание: Позиционирование выглядит напуганным из-за использования абсолютного позиционирования для полей Main. Я бы это изменил. Но если вы скопируете код на свою страницу, это может быть то, к чему вы стремитесь.

html, body { 
 
    height: 100%; 
 
} 
 

 
.page { 
 
    background: linear-gradient(#2d5aa4, #03637c); 
 
    height: 100%; 
 
    margin: 0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    position: relative; 
 
} 
 

 
.NavigationBar { 
 
    background: linear-gradient(to right, #636363, #4e4e4e); 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    width: 220px; 
 
    min-height: 100%; 
 
    z-index: 2; 
 
    font-family: BloggerSans; 
 
    font-size: 1.5em; 
 
} 
 
.NavigationBarBorder { 
 
    background: linear-gradient(to right, #292929, #171617); 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 10px; 
 
    min-height: 100%; 
 
    z-index: 3; 
 
} 
 

 
.MainParent { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
.NavigationTop { 
 
    background: linear-gradient(#636363, #4e4e4e); 
 
    position: absolute; 
 
    left: 220px; 
 
    width: calc(100vw - 220px); 
 
    height: 75px; 
 
    z-index: 1; 
 
    font-family: Jaapokki; 
 
    font-size: 2em; 
 
} 
 

 
.Main { 
 
    background: linear-gradient(#ffffff, #e8e8e8); 
 
    position: absolute; 
 
    top: 20vh; 
 
    bottom: 0px; 
 
    width: calc(100vw - 440px); /* set your width */ 
 
    left: 220px; 
 
    margin-left: 90px; /*set your margin here */ 
 
    min-height: 100%; 
 
    z-index: 4; 
 
    padding-left: 40px; 
 
} 
 

 
.MainBorder { 
 
    background: linear-gradient(#f79104, #e9720d); 
 
    position: absolute; 
 
    top: -10px; 
 
    left: 0; 
 
    width: 40px; 
 
    min-height: 100%; 
 
} 
 

 
h1 { 
 
    font-family: 'Jaapokki'; 
 
    text-align: center; 
 
    font-size: 3em; 
 
} 
 

 
.Text { 
 
    font-family: 'BloggerSans'; 
 
    font-size: 2em; 
 
}

<body class="page"> 
 
    <div class="MainParent"> 
 
     <nav class="NavigationBar"> 
 
      <div class="NavigationBarBorder"></div> 
 
      Table of content 
 
     </nav> 
 
     <header class="NavigationTop"> 
 
      Navigation 
 
     </header> 
 
     <div class="Main"> 
 
      <h1>Title</h1> 
 
      <div class="Text"> 
 
       Text </br> 
 
      </div> 
 
      <div class="MainBorder"></div> 
 
     </div> 
 
    </div> 
 
</body>

источник

2016-10-04 18:02:50 mhatch

Моя граница не должна быть внутри .main, потому что он должен торчать немного, просто так: http://i.imgur.com/YniYk5L.png , но спасибо за ваш ответ. Извините за странный ответ в начале, но я думал, что ввод не означает «ответ» или «сохранение». – SaJmoN

@SaJmoN Просто используйте отрицательную вершину 'top: -10px' – mhatch

Я бы также рекомендовал дать вам основную ширину, а затем позиционировать слева. Теперь, когда у вас есть это, основное исчезнет, если браузер будет сужен. – mhatch

ответ

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