Высота более 100% высоты браузера

Я создаю отзывчивый веб-сайт. Я не хочу устанавливать высоту по умолчанию в px, но я хочу что-то вроде этого. Это будет только верхняя часть макета. Например. prowly.com.Высота более 100% высоты браузера

enter image description here

И моя скрипка:

http://jsfiddle.net/QVxW8/1/

 html, body { 
      margin: 0; 
      padding:0; 
     } 
     div#handler { 
      width: 100%; 
      height: 110%; 
      display:block; 
     } 
     div#content { 
      width: 100%; 
      height:100%; 
      background: red; 
     } 
     div#content2 { 
      width: 100%; 
      height: 10%; 
      background: blue; 
     }

HTML

<body> 
    <div id="handler"> 
     <div id="content">I want to 100% height of browser</div> 
     <div id="content2">I want 10% of height browser</div> 
    </div> 
</body>

Ps. Как я также видел, 100% высоты не работает на iPhone Safari и Opera Mobile, поэтому я не знаю, что мне делать. Конечно, я могу использовать JS, но я хочу знать, есть ли другой способ?

источник

2013-08-26 G.Z

Нет ошибок. Это должно быть так. –

позиция попытки: абсолютная; на #handler – Tiago

Кроме того, это было задано перед http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height –

вам необходимо установить тело как этот

html, body { 
       margin: 0; 
       padding:0; 
       position:absolute;/* this is very important*/ 
       bottom:0; 
       top:0; 
       right:0; 
       left:0; 
      }

Demo: http://jsfiddle.net/QVxW8/5/

или как это:

html, body { 
       margin: 0; 
       padding:0; 
       position:absolute;/* this is very important*/ 
       left:0; 
       top:0; 
       width:100%; 
       height:100%; 
      }

и иметь правильные значения используют

*{ 
margin:0; 
padding:0; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box; 
}

или просто изменить ваш код для

html, body { 
       margin: 0; 
       padding:0; 
       height:100%; 
      }

демо: http://jsfiddle.net/QVxW8/6/

источник

2013-08-26 17:25:04

попробовать это

*{padding: 0; marign:0;} 
     html, body { 
      margin: 0; 
      padding:0; 
     } 
     div#handler { 
      width: 100%; 
      height: 110%; 
      display:block; 
     } 
     div#content { 
      width: 100%; 
      height:100%; 
      background: red; 
     } 
     div#content2 { 
      width: 100%; 
      height: 10%; 
      background: blue; 
     }

источник

2013-08-26 16:58:42

Это не работает –

Попробуйте добавить высоту 100% в html, body так:

html, body { 
     height: 100%; 
     margin: 0; 
     padding:0; 
    }

JSFIDDLE

EDIT: Вы можете прочитать статью this.

источник

2013-08-26 16:58:50 Mike

Высота более 100% высоты браузера

ответ

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