1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Multiple Divs

Discussion in 'HTML & Website Design' started by Web_Dev_Chris, Dec 28, 2016.

0
  1. #1
    what is the best way to position multiple divs under each other so that each div takes up 100% width and height of the viewport when scrolled down to?

    I want each div to fill the view port. Fixed widths don't do any good as each computer has different resolutions ect...

    Example
    Red div 1
    Yellow div 2
    Orange div 3

    Thank

    Regards
    Chris
     
    Solved! View solution.
    Web_Dev_Chris, Dec 28, 2016 IP
  2. #2
    This will work on IE9+ if you use prefixes and old syntax fallbacks.

    
div {
  height: 100vh;
}
    Code (markup):
    Otherwise you'd head to get funky. This is untested:

    
body {
  height: 300%;
}

div {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}

.div1 {
  top: 0;
}

.div2 {
  top: 100%;
}

.div3 {
  top: 200%;
}
    Code (markup):
     
    KewL, Dec 28, 2016 IP
    Web_Dev_Chris likes this.
  3. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #3
    I didn't think of that! Thanks! I'll play around and test.
     
    Web_Dev_Chris, Dec 28, 2016 IP
  4. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #4
    Working! Thanks!
     
    Web_Dev_Chris, Dec 28, 2016 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    The Apo technique has a MAJOR failing -- what if the content at smaller sizes is TALLER than the window height? It gets chopped off, that's what! Absolute positioning of 100% height is rubbish; fixed heights are rubbish, which is why vh is rubbish too for this. Likewise that 300% height for body? RUBBISH since that should be making ALL of them 300% since 100% of 300% is 300%. DERP!

    what you WANT is MIN-HEIGHT!

    
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<link
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
>
</head><body>

<div>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a mollis lacus, eget venenatis sapien. Cras efficitur dolor et urna dapibus porttitor. In elementum sagittis placerat. Donec dignissim lorem lacus, facilisis vulputate tortor dapibus ac. Sed a blandit turpis. Ut nec purus tellus. Proin in pharetra nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit lorem urna, at commodo felis lacinia semper.
	</p><p>
		Maecenas lacus est, tristique eu leo quis, eleifend laoreet justo. In ultrices viverra nisl, eget placerat lorem. Duis orci orci, malesuada quis ipsum vel, malesuada pharetra neque. Praesent sit amet dui volutpat, pellentesque magna vitae, condimentum leo. Praesent sed elit purus. Fusce vehicula quis nunc nec mollis. In hac habitasse platea dictumst.
	</p>
</div>

<div class="second">
	<p>
		Nulla bibendum velit quis purus fringilla suscipit. Cras nec maximus diam, non finibus metus. Ut magna velit, placerat ac dui eget, volutpat pretium arcu. Donec sit amet malesuada sem, eu varius risus. Vivamus facilisis aliquam varius. Sed mollis erat quis nisi gravida, eu lacinia mi sagittis. Ut viverra sem malesuada, euismod erat id, auctor lacus. Sed a nunc sit amet risus posuere lacinia. Duis sem est, rhoncus id eros ac, convallis rutrum augue. Vivamus commodo scelerisque lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ornare lorem in ligula vestibulum, ac rhoncus diam rhoncus. In consequat justo quis elit efficitur, id semper nisl tristique.
	</p>
</div>

<div class="third">
	<p>
		Nulla nec eros sit amet purus ornare feugiat. Aenean dapibus ipsum mauris, id dapibus sapien pulvinar sit amet. Nulla odio sem, malesuada non consectetur ut, blandit eu enim. Sed accumsan risus aliquam lacinia scelerisque. Maecenas ornare hendrerit dolor, at tempor nunc tempor vel. Nunc a commodo urna. Vestibulum convallis lacus eget porta luctus. Duis vitae elit eget nulla semper aliquet ac quis libero. Nunc justo nisl, finibus ut luctus ac, condimentum in quam. Aenean eu hendrerit libero, nec iaculis mauris.
	</p><p>
		Nunc lacus lorem, posuere sit amet commodo non, iaculis nec sem. Ut vel augue sapien. Ut ornare purus quis feugiat convallis. Sed vel ullamcorper lectus, non imperdiet ex. Cras volutpat porttitor ex, ac vehicula ipsum elementum sed. Morbi at hendrerit justo. Integer dignissim nec mi non porta. Proin suscipit dolor sit amet dignissim elementum. Etiam a viverra est, vel gravida elit. Donec interdum hendrerit lacus sit amet commodo. Etiam accumsan in nunc quis ullamcorper.
	</p>
</div>

</body></html>
    Code (markup):
    
html, body, div {
	margin:0; 
	padding:0;
}
html, body {
	height:100%;
}
div {
	overflow:hidden; /* wrap floats and margins */
	zoom:1; /* trip haslaoyut, wrap floats and margins legacy IE */
	min-height:100%;
	background:#F00;
}
.second {
	background:#0F0;
}
.third {
	background:#0FF;
}
p {
	margin:1em;
}
    Code (markup):
    That way when the display is too small it doesn't fall apart! Should work all the way back to IE7, and in IE6/earlier oh noes, they shrink to fit, nots thatz.

    ANYONE telling you to absolute position major content sections is wrong and really needs to take a step back and bother learning what flow is, and why it is important. NOT that this type of "perfect height" bullshit is good layout practice from an accessibility standpoint in the first place being the type of artsy fartsy bullshit that PSD jockeys and NOBODY else creams their panties over, but if you're going to derp on the layout, try to herp as little as possible!

    Sorry @KewL, but herpafreakingderp buddy.
     
    deathshadow, Dec 31, 2016 IP
  6. ale_steve

    ale_steve Greenhorn

    Messages:
    12
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #6
    this was helpful :)
     
    ale_steve, Jan 3, 2017 IP