Jump to content
  • 0

html, body {height:100%;}

Daniil Khanin

Asked by Daniil Khanin,

 Share

Question

Daniil Khanin Explorer

Daniil Khanin

Posted
Posted (edited)

Доброго времени суток, проблема у меня вот в чём: 

 

есть сайт http://www.lol.domstroi69.ru/proekti.html,  ему задано 

html,body{height:100%//задал для того чтобы на мониторах разной высоты всегда была голубая полоска на всю высоту экрана}#wrap{height:100%;position:relative;}left-barBox{width:50px;backgeound-color:blue;height:100%;position:absolute;left:20px;}#footer{position:absolute;bottom:0;right:0;// футер который должен всегда находится внизу}

Проблема в том, что когда я уменьшаю окно бразуреа по высоте или начинаю добавлять изображения в див с id='contentBox'  у меня получается вот такая вот Ху...

 

 

66c9bea79b10.png

 

 

 

Всё конечно исправляется если я не указываю высоту html,body  wrap    height='100%'   #footet  clear:both, но тогда у меня левая менюшка будет на высоту забитого мною контента, а мне нужно чтобы была на высоту экрана браузера...  

Edited by Daniil Khanin
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Kray Storm
      Высота float-элемента в 100% в FF и Chrome
      By Kray Storm
      Мда ))
      Уже начал сходить с ума, пытаясь понять логику, по которой float-элемент игнорирует height и min-height в процентах.
      Оказалось дело в Firefox.
      Допустим, у нас есть float-блок, который находится в родителе. И нам нужно, чтобы даже при отсутствии контента (или малом количестве) у плавающего была бы какая-то минимальная заданная высота. Как бы логично и удобно использовать min-height, который берется от родителя. Но FF все обламывает.
      Понятно, что такую модель можно реализовать и по-другому.
      Но вопрос в том, что есть ли способ, не меняя подход, научить FF видеть эту высоту?
      Перед нажатием на "отправить" проверил в Хроме. Та же проблема.
      Тогда это уже интереснее. Кто может подсказать что-то на этот счет?
      Код онлайн
      Этот же код:


      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>float height:100% error</title>

      <style type="text/css">
      html, body{
      height:100%;
      }
      body{
      margin:auto;
      }
      #main{
      overflow:hidden;
      width:50%;
      min-height:70%;
      margin:auto;
      background:#ccf;
      }
      #left{
      float:left;
      width:50%;
      min-height:100%;
      background:#ffc;
      }
      </style>
      </head>

      <body>
      <div id="main">
      <div id="left">Плавающий блок</div>
      </div>
      </body>
      </html>
      У Оперы и даже jsfiddle.net все в порядке.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept