Here is my initial HTML structure (I used Bootstrap framework)
<html>
<body>
<header>My header</div>
<div class="container-fluid">
<div class="row">
<div id="list" class="col-md-7"></div>
<div id="map" class="col-md-5"></div>
</div>
</div>
<footer>My Header</footer>
</body>
And the css :
#list
{
height : 2500px /* For the exemple */
}
#map
{
height : 500px
}
#map.affix {
position: fixed;
top: 70px;
right: 0;
}
Initially my position of div #map is relative.
I would like to set position of div #map to fixed when the div (#map) becomes visible on the screen until the bottom of div #list.
And finally, I would like to set my div to relative position again when my div #map reached the bottom of div #list.
For this scenario, I used the affix plugin of bootstrap :
$('#map').affix({
offset: { top: $('#map').offset().top }
});
BUT when my scroll reaches the div #map, it disappears from the screen (because position is fixed and the width of my div#map is liquid)
How to display the div #map with the fixed position on the top/right off the screen ans with my initially size (when it'is in position:relative) ?
Is someone a solution to this problem ? Thanks you for your help !
Here is my desired scenario :
Are you trying to do something like this?
http://jsfiddle.net/b43hj/3503/
<header>My Header</header>
<div class="container-fluid">
<div class="row">
<div id="list"></div>
<div id="theFixed">SOMETHING</div>
</div>
</div>
<footer>My Footer</footer>
#theFixed {
height : 300px;
background: red;
position: fixed;
top: 700px;
right: 0px;
width: 40%;
}
#list {
height: 2500px;
width: 200px;
background: green;
}
$(window).scroll(function(){
$("#theFixed").css("top",Math.max(0,700-$(this).scrollTop()));
});
I have 10 div, and every one of them has position absolute, width: 100px and height 100px. In this case, we will see only one div, as rest of div overlaps each other.
So i wanted to ask, if i can in pure CSS, select those div, and add every one, top property which should look like:
fist div : top:0
second div: top:100px
third div: top:200px
And so on...
I tried with for example with this formula, but without success:
:nth-child(n+x);
Thanks.
Yes you can do that..
e.g.
<div id="wrapper">
<div class="first-div">
<div class="second-div">
</div>
<style type="text/css">
/* for first div */
#wrapper > div:nth-child(1) {
top: 0px;
}
</style>
using jQuery, you can set top dynamically.
e.g.
jQuery('#wrapper > div').each(function(index){
jQuery(this).css('top', index * 100);
});
If you want to use Alpesh Panchal approach and still have variable height divs, you can just store the total height in a variable:
http://jsfiddle.net/4u9jLm95/2/
HTML:
<div id="wrapper">
<div class="first"> </div>
<div class="second"> </div>
<div class="third"> </div>
<div class="fourth"> </div>
</div>
CSS:
#wrapper div {
background-color: teal;
width: 100px;
position: absolute;
}
.first {
height: 100px;
}
.second {
height: 200px;
}
.third {
height: 50px;
}
.fourth {
height: 150px;
}
JS:
var total = 0;
$('#wrapper > div').each(function(index){
$(this).css('top', total);
total += $(this).height() + 100;
});
However, as others said, using position: absolute might not be the best option here.
On load I'd like to load the topsection div with a bg image and have it take up the entire screen, but then I have content below it which you can scroll down to. The div should size itself to the window screen only on load and not remain like that on scrolldown. I cannot give the div a position:absolute; either.
I'm banging my head on this one. I've tried a ton of different things
Here is my html:
<div id="topsection" class="row bgimage ">
<div id="logomain" class="mainlogo ">
<div class=" floorplanbuttoncontainer helvetical">
<ul>
<li>Residence A - Duplex</li>
<li>
Residence D - Simplex</li>
</ul>
</div><!-- end floorplanbuttoncontainer -->
</div><!-- end logomain -->
Here is my css for the background image:
.bgimage {
background: url(images/image.jpg) no-repeat center center fixed;
background-size: cover;
.mainlogo {
margin:0 auto;text-align:center;width:100%;height:488px; /*I think this height is messing things up */
background-image:url(images/picture.png);background-repeat:no-repeat;
background-position: center;
}
In order to set a div to take up the entire screen you need to set the height of the body and html element to 100%. You also have to remove the padding and margin from them. Then you create a wrapper class to encase your content and assign it your background-image. Then all ya' gotta do is create the content below your full screen image to scroll into!
Fiddle
Edit
If you run the snippet below and hit full page you can see how it works.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
background: red;
}
.full {
width: 100%;
}
.footerThing {
width: 100%;
height: 200px;
background: blue;
}
<div class="wrapper">
<div class="full">
asd
</div>
</div>
<div class="footerThing">
</div>
Modern browsers: a simple way is to use vh units to get the Viewport Height
Just to simplify: jsBin demo
<div id="home" class="container full">
<h1>HOME</h1>
</div>
<div id="about" class="container">
<h1>About us</h1>
<p>Content</p>
</div>
CSS:
.container { min-height:400px; }
.full { height:100vh; }
Crossbrowser: use % instead of vh and simply add html, body{height:100%;} jsBin demo
I have 2 images in a row, which are of different height. The structure is build using Bootstrap grid.
I want the images to be responsive according to the width of viewport, but at the same time they has to be of equal height at every moment. (otherwise the texts below are scattered)
HTML:
<div class="item container active">
<h1>Lorem IPSUM</h1>
<div class="row items-holder">
<div class="col-xs-6">
<img />
<p class="title">SOME TITLE</p>
<p class="subtitle">Subtitle</p>
</div>
<div class="col-xs-6">
<img/>
<p class="title">SOME TITLE</p>
<p class="subtitle">Subtitle</p>
</div>
</div>
</div>
CSS:
.items-holder img {
width: 100%;
height: auto;
max-height: 450px;
overflow: hidden;
display: block;
}
The fiddle: http://jsfiddle.net/64CLd/
Similar problem is mentioned here, but the solution doesn't work for me.
It's possible but CSS sucks :) here you have an example fully functional using javascript another option you do not have but to use javscript: http://jsfiddle.net/3y35w/6/
If max-height: 450px is removed images will continue with responsive dimensions:
var fitImages = function(){
$("#img1").removeAttr( "style" );
$("#img2").removeAttr( "style" );
var changedWidth = $("#img1").height();
var h1 = $("#img1").height();
var h2 = $("#img2").height();
//it can be done only with height but using double check ratio of the images is a bit more acurate
if (changedWidth < OrigWidth) //expand
{
//using higher image as refference when maximize
if (h1 > h2)
{
$("#img2").height(h1);
}
else if (h2 > h1)
{
$("#img1").height(h2);
}
}
else
{
//using lower image as refference when minimize
if (h1 < h2)
{
$("#img1").height(h2);
}
else if (h2 < h1)
{
$("#img2").height(h1);
}
}
OrigWidth = changedWidth;
return 0; }
you need to create a new row for the title and subtitle
http://jsfiddle.net/64CLd/2/
<div class="col-xs-6 gueas">
<div><p class="title">SOME TITLE</p>
<p class="subtitle">Subtitle</p></div>
<div><p class="title">SOME TITLE</p>
<p class="subtitle">Subtitle</p></div>
</div>
One solution is wrap the img tag in a div and give some height to the div. This will help you keep a consistent height, independent of the image height.
Following this, to vertically center align the image use the below css
CSS
.items-holder img {
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin: auto;
}
.img_holder{
height: 450px; //This can also be calculated dynamically with javascript as the max height within all images.
position:relative;
background:#ddd; //Optional
}
HTML
<div class="img_holder">
<img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-xpf1/t1.0-9/10380889_10204383083927507_6950941830183040199_n.jpg" alt="" />
</div>
DEMO
I have a navigation bar on the left hand side of my page, and I want it to stretch to 100% of the page height. Not just the height of the viewport, but including the areas hidden until you scroll. I don't want to use javascript to accomplish this.
Can it be done in HTML/CSS?
Here is the solution I finally came up with when using a div as a container for a dynamic background.
Remove the z-index for non-background uses.
Remove left or right for a full height column.
Remove top or bottom for a full width row.
EDIT 1: CSS below has been edited because it did not show correctly in FF and Chrome. moved position:relative to be on the HTML and set the body to height:100% instead of min-height:100%.
EDIT 2: Added extra comments to CSS. Added some more instructions above.
The CSS:
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}
The html:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>
Why?
html{min-height:100%;position:relative;}
Without this the cloud-container DIV is removed from the HTML's layout context. position: relative ensures that the DIV remains inside the HTML box when it is drawn so that bottom:0 refers to the bottom of the HTML box. You can also use height:100% on the cloud-container as it now refers to the height of the HTML tag and not the viewport.
With HTML5, the easiest way is simply to do height: 100vh. Where 'vh' stands for viewport height of the browser window. Responsive to resizing of browser and mobile devices.
I had a similar problem and the solution was to do this:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}
I wanted a page-centered div with height 100% of page height, so my total solution was:
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}
You might need to make a parent element (or simply 'body') have position: relative;
You can cheat using Faux Columns
Or you can use some CSS trickery
Use position absolute. Note that this isn't how we are generally used to using position absolute which requires manually laying things out or having floating dialogs. This will automatically stretch when you resize the window or the content. I believe that this requires standards mode but will work in IE6 and above.
Just replace the div with id 'thecontent' with your content (the specified height there is just for illustration, you don't have to specify a height on the actual content.
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>
The way that this works is that the outer div acts as a reference point for the nav bar. The outer div is stretched out by the content of the 'content' div. The nav bar uses absolute positioning to stretch itself out to the height of its parent. For the horizontal alignment we make the content div offset itself by the same width of the navbar.
This is made much easier with CSS3 flex box model, but that's not available in IE yet and has some of it's own quirks.
I ran into the same problem as you. I wanted to make a DIV as background, why, because its easy to manipulate div through javascript. Anyways three things I did in the css for that div.
CSS:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}
It's simple using a table:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>
When DIV was introduced, people were so afraid of tables that the poor DIV became the metaphorical hammer.
I want to cover the whole web page before prompting a modal popup. I tried many methods using CSS and Javascript but none of them help until I figure out the following solution. It works for me, I hope it helps you too.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>
Good luck ;-)
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
If you are targeting more modern browsers, life can be very simple.
try:
.elem{
height: 100vh;
}
if you need it at 50% of the page, replace 100 with 50.
document.body.onload = function () {
var textcontrol = document.getElementById("page");
textcontrol.style.height = (window.innerHeight) + 'px';
}
<html>
<head><title></title></head>
<body>
<div id="page" style="background:green;">
</div>
</body>
</html>
This is how you can make your side nav as tall as the page content, without having to change the body to be flex or table.
Don't set html or body to height 100%, because that will make it only as tall as the browser viewport, and the page will be overflowing that, and your nav will only be as tall as the viewport.
Just set your nav to height:100% position:absolute with the html tag position:relative.
The reason this works is because height 100% only works if its container is fixed height, with the exception (for some reason) the html tag.
<html style='position:relative'>
<body style='margin:0'>
<div style='height:100%; position:absolute; top:0; background:linear-gradient(to bottom,red,green); border:2px solid blue'>
nav
</div>
<div style='font-size:99px;padding:33px'>
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
I want my side div to be as tall as the page content.<br />
</div>
</body>
</html>
This code works but not fully supports:
height: 100svmax;
Browsers support
Edit
Sorry, old answer is not correct..
i have tried all viewport units
but the only solution work using javascript here
Simple, just wrap it up in a table div...
The HTML:
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>
The CSS:
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>
I succeeded with
min-height: 100vh
for both, the menu and content div.