HEIGHT не понимает 100%

AppleMacMy · June 2, 2012

Подскажите пожалуйста, такая маленькая проблема:

<div style="width: 100%; height: 100%"></div>

Почему не хочет он становиться в ширину 100% по размеру окна?

Edited June 2, 2012 by AppleMacMy

WabFad · June 2, 2012

В ширину или высоту?

Если речь о HEIGHT, то всем родительским блокам (включая html и body) нужно задать высоту 100%, а самому блоку min-height:100%;

clavin · June 3, 2012

Если речь о HEIGHT, то всем родительским блокам (включая html и body) нужно задать высоту 100%, а самому блоку min-height:100%;

Почему обязательно min-height:100%; а не просто height:100%;?

arthur1974 · June 4, 2012

Если речь о HEIGHT, то всем родительским блокам (включая html и body) нужно задать высоту 100%, а самому блоку min-height:100%;

меня вот этот вопрос тоже очень интересует.

В body стоит height: 100%;

во внутреннем объекте ставил тоже height: 100%, и попробовал уже ставить min-height: 100% - всё равно не работает, а очень нужно.

Или может быть есть какой-то другой способ вычислить и задать высоту в "резиновом" сайте объекту с текущей позиции (у него она релятив) и до конца отображаемой области интернет-проводника?

arthur1974 · June 4, 2012

Подскажите пожалуйста, такая маленькая проблема:
<div style="width: 100%; height: 100%"></div>
Почему не хочет он становиться в ширину 100% по размеру окна?

вот перекинулся парой слов с специалистом в веб разработках. Сказал, что так сделать (height: 100%) в данном случае нельзя в принципе. Нужно ковырять только java-скриптом, перехватывать событие OnResize и задавать высоту объекта уже вычисленной высотой.

Sensei · June 4, 2012

Почему обязательно min-height:100%; а не просто height:100%;?

Да потому, что если прописать height:100% блок станет фиксированным на высоту области просмотра, и следовательно не будет растягиваться по контенту в случаи переполнения.

<style>
	html, body {
		margin: 0;
		height: 100%;
	}
	#main {
		min-height: 100%;
		background: green;
	}
</style>

<div id="main">
</div>

вот перекинулся парой слов с специалистом в веб разработках. Сказал, что так сделать (height: 100%) в данном случае нельзя в принципе. Нужно ковырять только java-скриптом, перехватывать событие OnResize и задавать высоту объекта уже вычисленной высотой.

Зачем тут js мне непонятно.

Vin · June 4, 2012

вот перекинулся парой слов с специалистом в веб разработках. Сказал, что так сделать (height: 100%) в данном случае нельзя в принципе. Нужно ковырять только java-скриптом, перехватывать событие OnResize и задавать высоту объекта уже вычисленной высотой.

Значит, у специалиста явные "пробелы" в знании HTML и CSS.

arthur1974 · June 4, 2012

Почему обязательно min-height:100%; а не просто height:100%;?
Да потому, что если прописать height:100% блок станет фиксированным на высоту области просмотра, и следовательно не будет растягиваться по контенту в случаи переполнения.

мне, к примеру, и нужно ,что бы блок стал фиксированным на высоту области просмотра. Т.е. начиная с высоты которую он сейчас занимает (у него релятив) и до низа области просмотра. И сосем не нужно, что бы он растягивался по контенту.

Вот попросисывал и в объекте и во всех его родительских, и в боди height:100% - болт с левой резьбой (т.е. не работает).

Т.е. ширина width=xx - работает, но не высота.

alexforce2 · June 4, 2012

Может вам это надо http://jsfiddle.net/93vcN/

добавьте блоку div свойство overflow:hidden; и контент обрежется

arthur1974 · June 4, 2012

вот привожу пример

html:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
	<header id="header">
            <div class="top_flash" >
                <img src="1.jpg">
                <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" 
                    width="100%" height="100%" id="Flash1">
                    <param name="movie" value="flash3.swf">
                    <param name="quality" value="High">
                    <param name="scale" value="ExactFit">
                    <param name="wmode" value="Transparent">
                    <param name="play" value="true">
                    <param name="loop" value="true">
                    <param name="menu" value="false">
                    <param name="allowfullscreen" value="false">
                    <param name="allowscriptaccess" value="sameDomain">
                    <param name="sAlign" value="tl">
                    <embed src="flash3.swf" width="100%" height="100%" quality="High" wmode="Transparent" loop="true" play="true" menu="false" allowfullscreen="false" allowscriptaccess="sameDomain" scale="ExactFit" 
                        type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
                    </embed>
                </object>
            </div>             
        <div id="r_line">
			   <marquee behavior="scroll" scrolldelay="80" scrollamount="3"> My company</marquee>
        </div>

	</header><!-- #header-->


	<section id="middle">

		<div id="container">
			<div id="content">          

            <iframe name="smenu" src="0.htm" id="main_frame"> </iframe>                       				
			</div><!-- #content-->
		</div><!-- #container-->
		<aside id="sidebar">
            <div id="menu"> 
            <div id="FlashMenuLabs">
                <p>You need to upgrade your Flash Player or to allow javascript to enable Website menu.</br>
                <a href="http://www.adobe.com/go/getflashplayer">Get Flash Player</a></p>            
            </div>
            <script type="text/javascript">
                var so = new SWFObject("menu.swf", "menu", "200", "430", "8", "#ffffff");
                //so.addVariable("page_code", "1");            
                //so.addParam("wmode", "transparent");
                so.addParam("scale", "noscale");
                so.addParam("salign", "TL");    
                so.write("FlashMenuLabs");
            </script>    
            </div>
	</aside>
	</section><!-- #middle-->

</div><!-- #wrapper -->
</body>
</html>

а это файл стилей:


* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
header, nav, section, article, aside {
	display: block;
}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	height: 100%;  
    background: #0d1424 url(body-bg.jpg) no-repeat center top;
    background-size: cover;
    background-attachment: fixed; 
}
a {
	color: blue;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {
	margin: 0 0 18px
}
img {
	border: none;
}
input {
	vertical-align: middle;
}
#wrapper {
	min-width: 450px;
	max-width: 980px;
	margin: 0 auto;
}
/* Header
—————————————————————————--*/
#header {
    position: relative;    
}

#r_line {    
    font: bold 120% "Tahoma", Times, serif;
	color: #fff;
	width: 98%;
    position: relative;    
    top: 35px;
    left: 10px;
}
/* embedded top_flash */
.top_flash { border: 0px solid blue; position: relative; top: 30px; left: 50px;}
.top_flash > img { width: 100%; display: block;}
.top_flash > object {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;   
}
/* Middle
—————————————————————————--*/
#middle {
	width: 100%;
	height: 100%;
	position: relative;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 100%;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
    height: 100%;
}
#content {
    margin: 40px 10px 10px 230px;
    background-color: #fff;
    height: 100%;    
}
#main_frame {    
    width: 100%;
    float: right;
    overflow: scroll;
    margin: 0;
    height: 100%;
}
/* Sidebar
—————————————————————————--*/
#sidebar {
	float: left;
	margin: 40px 0 10px -100%;
	width: 210px;
}
#menu {
	float: right;
}

то ж в чём тогда здесь проблема?

мне в данном случае надо, что бы iframe был начиная с текущего положения и до низа отображаемой области интернет-проводника

Edited June 4, 2012 by arthur1974

Sensei · June 4, 2012

Проблема в том, что вы не задали высоту блоку wrapper. И зачем вы везде пишите width: 100%? Просто не задавайте width, по умолчанию в таком случае будет стоять auto, а значит блок будет растягиваться на всю ширину. Более того если блоку со 100% шириной рамку добавить, то появится горизонтальный скролл, так как рамка снаружи рисуется.

arthur1974 · June 4, 2012

Проблема в том, что вы не задали высоту блоку wrapper.

По оводу высоты wrapper благодарю - я его действительно пропустил. Но это не решило мой проблемы и вопрос остался открытым:

Как задать высоту middle = (100% - header.height)?

Т.е. как сделать так, что бы высота middle занимала ниже header всю оставшуюся часть экрана и не зависела от степени её заполнения, но не выходила за экран (что бы не включался скрол)

?

Sensei · June 4, 2012

так? http://jsfiddle.net/sensei/RPGV8/1/

arthur1974 · June 4, 2012

так? http://jsfiddle.net/sensei/RPGV8/1/

да... - всё гениальное просто.

СПАСИБО!!!

arthur1974 · June 4, 2012

так? http://jsfiddle.net/sensei/RPGV8/1/

от блин... Собрался было уже переделать свой сайт под Ваш шаблон, НО - хедер то у Вас задан жёсткой высоты, а у меня там масштабируемые объекты находятся и высоту хедера задавать фиксированным нельзя. Поставил высоту в хедере авто - испортился middle - при сужении страницы уменьшается высота хедера и middle не достаёт до нижней области экрана.

Т.е. оказывается проблема не решилась

Может быть есть другие варианты или способы?

Sensei · June 5, 2012

можно еще проще) http://jsfiddle.net/sensei/RPGV8/3/

Edited June 5, 2012 by Sensei

arthur1974 · June 5, 2012

можно еще проще) http://jsfiddle.net/sensei/RPGV8/3/

Прекрасный пример. У меня страничка фактически так и сделана, но почему-то проблема с высотой ifame.

html


<body>
<div id="wrapper">
	<header id="header">
            <div class="top_flash" >
            </div>            
	</header>

	<section id="middle">
		<div id="container">
			<div id="content">                     
<iframe name="smenu" src="0.htm" id="main_frame"> </iframe>
			</div>
		</div>
		<aside id="sidebar">
                   <div id="menu"> 
                   </div>
		</aside>
	</section>

</div>
</body>
</html>

css


html {
	height: 100%;
}
header, nav, section, article, aside {
	display: block;
}
body {
	height: 100%;  
}
#wrapper {
        height: 100%;
}
#header {
    position: relative;   
}
#middle {
	height: 100%;
}
#container {
    height: 100%;
}
#content {
    height: 100%;    
}
#main_frame {    
    height: 100%;
}

Почему у iframe высота получается = 100% от всего экрана, а не от секции middle?

arthur1974 · June 5, 2012

а если у блоков middle и последующих убираю 100%-ную высоту, но они становятся маленькими по высоте (если внутри их мало содержания).

А нужно, что бы iframe занимал всю высоту middle

arthur1974 · June 6, 2012

можно еще проще) http://jsfiddle.net/sensei/RPGV8/3/

В Вашем примере серым цветом виден незакрываемая "шапкой" часть основной области страницы. Но как указать новому объекту на этой оставшейся (серой области) высоту заполнения от шапки до конца листа, если шапка может динамическим меняться (резиновый сайт)?

Sign In

HEIGHT не понимает 100%

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information