Элементы рушится, когда я меняю их высоту на процентные значения

Я работаю над своим вторым проектом для Интернета (сам преподаю), и у меня есть вопрос новичков.Элементы рушится, когда я меняю их высоту на процентные значения

У меня есть макет верхнего и нижнего колонтитула на моей странице, которые имеют высоту 100 пикселей. Я пытаюсь изменить это так, чтобы высота была в процентах, но когда я это делаю, они рушатся. Зачем?

Код:

HTML

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Photography</title> 
     <link rel="stylesheet" type="text/css" href="styles.css"> 
     <script type="text/javascript" src="jquery-3.1.0.min.js"></script> 
     <script type="text/javascript" src="JavaScript2b.js"></script> 
     <script type="text/javascript" src="JavaScript2.js"></script> 
    </head> 

    <body> 
     <div id="header"> 
     </div> 
     <div id="wrap"> 
      <div id="container"> 
       <div id="controllers"> 
        <div id="previous" class="buttons" onclick="change(-1);"> 
        </div> 
        <div id="next" class="buttons" onclick="change(1);"> 
        </div> 
       </div> 
       <div id="imagewrap"> 
        <img src="Images/01PARANA/Image1.jpg" height="100%" id="front" /> 
       </div> 
       <div> 
        <p id="tag">Poem</p> 
       </div> 
      </div> 
     </div> 
     <div id="footer"> 
     </div> 
    </body> 
    <script type="text/javascript" src="JavaScript2.js"></script> 
</html>

CSS

@font-face {font-family: Eagle-Light; 
        src: url("Eagle-Light.otf") format("opentype"); 
        } 

@font-face {font-family: Raleway Light; 
        src: url("Raleway Light.otf") format("opentype"); 
        } 

body { 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
} 

#header { 
    position: relative; 
    height: 100px; 
    width: 100%; 
    background-color: yellow; 
} 

#wrap { 
    position: relative; 
    clear: both; 
    padding: 0px; 
    width: 100%; 
} 

#footer { 
    position: relative; 
    height: 100px; 
    width: 100%; 
    background-color: lightgray; 
    display: block; 
} 

#container { 
    position: relative; 
    margin: 15px auto; 
} 

#controllers { 
    position: static; 
    height: 20px; 
} 

#previous { 
    position: absolute; 
    left: 10px; 
    background-image: url(Images/carremoins.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    width: 20px; 
    height: 20px; 
    z-index: 4; 

} 

#next { 
    background-image: url(Images/carreplus.png); 
    background-repeat: no-repeat; 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    right: 10px; 
    z-index: 4; 
    background-position: center center; 
} 

#container:hover .buttons { 
/* display: block;*/ 
opacity: 1; 
} 

#tag { 
    position: relative; 
    height: 40px; 
    line-height: 1.7em; 
    padding-top: 5px; 
    text-align: center; 
    font-size: 1.1em; 
} 


.buttons { 
    cursor: pointer; 
    top: 50%; 
    z-index: 3; 
/* display: none;*/ 
    opacity: 0; 
    transition: opacity .3s ease-in-out; 
} 


#imagewrap{ 
    position: relative; 
    border: 1px solid #818181; 
    overflow: hidden; 
    z-index: 2; 
    height: 100vh; 
} 

#front { 
    display: block; 
} 

p { 
    color: #818181; 
    font-family: Eagle-Light; 
    line-height: 1.7em; 
    padding: 0px; 
    margin: 0px; 
    font-size: 0.5em; 
    letter-spacing: 0.21em; 
} 


a:link { 
    text-decoration: none; 
    color: inherit; 
} 

a:visited { 
    text-decoration: none; 
    color: inherit; 
}

источник

2017-02-22 Paul

Вы можете использовать vh для установки высоты в процентах. – Andrew

http://stackoverflow.com/a/31728799/3597276 Прочтите это, я думаю, это поможет. – Andrew

Итак, я должен специально установить высоту контейнера. Но что, если я хочу, чтобы контейнер заполнил высоту окна (независимо от того, насколько большим или маленьким может быть окно), а нижний колонтитул всегда должен указывать 10% этой высоты. Можно ли сделать это? – Paul

Для контейнера, чтобы заполнить высоту экрана, вы можете попробовать это:

html, body { 
    height: 100%; 
}

источник

2017-02-22 10:56:16 Swellar

Я пробовал это, но у меня все еще есть полосы прокрутки. Каков самый простой способ заставить тело заполнить всю высоту, независимо от содержания? – Paul

Если вы получаете полосы прокрутки, у чего-то есть запас. Поля добавляют к общей высоте. Решение: установите «margin: 0» или используйте 'calc (100% - 16px)' для высоты (при условии, что верхнее и нижнее поля составляют 8 пикселей каждый). –

пожалуйста попробуйте сделать это:

#footer { 
height: 10vh; 
}

10vh = 10% высоты окна просмотра

, помимо непосредственной установки процент, вы также можете сделать расчеты, например, делая высоту нижнего колонтитула равна высоте окна просмотра минус 800px делая это:

#footer { 
height: calc(100vh - 800px); 
}

источник

2017-02-22 10:57:56

Элементы рушится, когда я меняю их высоту на процентные значения

ответ

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