3 строки div со 100% содержанием по высоте всегда

-7

У меня есть 3 строки div с нижним колонтитулом внизу страницы, но мне нужно иметь содержимое div всегда в полном размере от заголовка до нижнего колонтитула. внутри содержимого div у меня также есть iframe, и мне нужно, чтобы этот iframe всегда был на высоте 100% коннекта, а затем на 100% занимал пространство между верхним и нижним колонтитулом. это мой (образец) страница:3 строки div со 100% содержанием по высоте всегда

<body> 
     <div id="container"> 
      <div id="header"> 
        logo 
      </div> 
      <div id="content"> 
       <h2 id="appname"><img alt="App" src="/images/b_nextpage.png">&nbsp;Home</h2> 
       <iframe class="appcont" src="" width="100%" height="100%" name="youriframe" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="yes" noresize></iframe> 
      </div> 
      <div id="footer"> 
       <button name="menu" type="button" id="menuopen"><img alt="App" src="/images/s_process.png">&nbsp;<b>Menu</b> 
       </button> 
      </div> 
     </div> 
    </body>

это мой CSS:

html, body { 
font-family: sans-serif; 
padding: 0em; 
margin: 0em; 
color: #444; 
background: #fff; 
text-align: center; 
height: 100%; /* Important */ 
width: 100%; 
} 

#container { 
margin: 0px auto; 
text-align: center; 
height: 100%; 
}

благодаря заранее

источник

2012-06-20 GhostMaster75

Если бы у меня было решение моей проблемы, я бы ее не писал? в любом случае - три дня, когда я ищу решение. Если вы хотите помочь себе, я благодарен терпению, но в противном случае я действительно не понимаю ваших аргументов, мы здесь, чтобы спросить и помочь привить. – GhostMaster75

извините? Что случилось с тем, что я спросил? Я не знаю, как это сделать, хотя я искал через Google решение ... но не заслужил -1. Что такое мышление? – GhostMaster75

Они опустошают вас, потому что вы не сказали, какова ваша фактическая проблема, вы только что опубликовали код и сказали, что хотите. Что ломается на вашей странице и что вы пытались до сих пор преодолевать, что ломается? – huzzah

Используя это как разметке:

<div id="wrapper"> 
    <div id="header">HEADER</div> 
    <div id="content"> 
     <iframe class="appcont" src="" width="100%" height="100%" name="youriframe" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="yes" noresize></iframe> 
    </div> 
    <div id="footer">hi</div> 
</div>

и это, как ваш CSS:

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

#wrapper { 
    width: 100%; 
    height: 100%; 
    margin: auto; 
    position: relative; 
} 

#header { 
    height: 40px; 
    background-color: green; 
    color: #fff; 
} 

#content { 
    position:absolute; 
    bottom:40px; 
    top: 40px; 
    width:100%; 
    overflow: auto; 
    background-color: #333; 
    color: #666; 
} 

#footer { 
    height: 40px; 
    width:100%; 
    position:absolute; 
    bottom:0; 
    background-color: blue; 
    color: #fff; 
}

Does, что вы на своем пути?

источник

2012-06-20 20:38:43

ok .. эта работа .. thaks – GhostMaster75

Это Header, Body, Footer with CSS... покажет вам, как.

Но на самом деле это достаточно просто, что даже если вы не знаете ...

enter image description here

Также в разделе комментариев Elgoog дал ссылку на answer уже ответил на этот сайт ,

Пожалуйста, сделайте свое исследование.

источник

2012-06-20 20:33:15 xyz

Я уже пробовал это решение, но содержимое div (а не контейнер) остается с высота менее 100% пространства между верхним и нижним колонтитулом – GhostMaster75

3 строки div со 100% содержанием по высоте всегда

ответ

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