Please look at this website , I use section for every page, as you can see by going to down to the second page there is some extra space that belongs to the first page(the following picture).
There are four section and every section height is set 100%. then why there is an extra space there?
The min-height for the body is set to 1000px to ensure that each block you can scroll to on the site has enough space to cover the viewport. So, if your height at 100% for one section is less than the 1000px minimum, then you'll end up with a huge space because the minimum is larger than what you really need.
You can optionally set height to an absolute value (x px where x < 1000) until the space is gone. Something like #s1 { height: 700px; } would work, where #s1 is the section you pointed to in your question, and 700px is an example of a height that would mostly remove that space, but leave enough in between sections 1 and 2. Feel free to modify that value until you're satisfied with the look.
What you need is javascript. This is off the top of my head, and is general, but try something like this:
jQuery(function($){
$(window).bind("load, resize", function() {
var sections = $("section");
var height = $(window).height();
height = $(window).height();
$(sections).height(height);
});
});
Related
My element's height increases depending on what the user does with it. If I give it a wrapper div, and give that div an explicit pixel height and overflow:auto, it works as I would want it to (when the element becomes bigger than the height of its parent, it doesn't increase the size of the parent). I want the wrapper div to be as big as the space available on the page, but not allow it to expand beyond that. Giving it height:100% doesn't work, it just gets bigger. Giving it height:100vh also doesn't work because there are other elements on the page and so the size is too big.
I want the wrapper div to be able to expand until it becomes too big for the viewport (which height:100vh would achieve if it were not for the other elements on the page).
Basically I'm looking for something like height : amount of available space in the viewport.
This is what I ended up doing:
var viewportHeight = $(window).height();
var offset = $('#gridWrapper').offset().top;
$('#gridWrapper').height(viewportHeight - offset);
I execute the same stuff again on resize. gridWrapper is the id of the wrapping div.
you can use height:80vh or similar depends on the height of your other elements
function resizeElement() {
var height = $(window).height();
var neededHeight = (70 * height) / 100; //If you want 70% of the viewport
neededHeight = parseInt(neededHeight) + 'px';
$("div").css('height',neededHeight);
}
$(document).ready(function() {
resizeElement();
$(window).bind('resize', resizeElement);
});
You can try this. You may need to check what value do you get in var height. Depending on that you can append px or not in neededHeight. This is basically the logic.
In a project I am working on, I am trying to get the page's header height to be 5% of the screen. Obviously this is done with height: 5%;, however, I need the header to stay at 5% of the whole screen at ALL times. This means that if I were to shrink the browser window, the header div does NOT shrink proportionally as well. I need it to stay the same size, but the size needs to be set with the initial percentage. A website that I used for reference was github.com, as their header stays one size even when the browser window is shrunk. Flickr.com is another example of what I am looking for in a header. I have tried to use min-height: XXpx; (replacing the 'x' with numbers) but that was not effective.
Use JavaScript once the page has loaded to calculate the 5% of the window height & assign it to the header as its CSS height value. It will overwrite any set CSS values.
var h = window.innerHeight * 0.05;
getElementById('your-element-id').style.height = h+'px';
did you tryed vh(vertical height) calculation?
example
navbar{
min-height: 5vh;
max-height: xx;}
I've got two pages, page A which has a lot of content and requires scrolling down, and page B which has little content and only takes up half the browser window. I'm trying to stick a footer down at the very bottom of both pages, regardless of the size of their content.
Here is what I've been trying to do. I've two containers inside the body, one for footer and one for everything else, call it main-wrapper. I've put borders aroudn the wrappers and body to see wheree they take up. Main wrapper will take up all the content on page A, but on page B it will only sit around the actual content, it's bottom-border is half way down the page, even though the body body takes up the full screen. I've set the main-warpper height to 100% so why won't it take uo the full body???
This is how I would approach this situation. It sounds like you need to set a min-height on your main-wrapper instead of just having it's height set to 100% of the filling container. Due to screen sizes greatly varying from user to user, you'll need to use a little javascript/jquery to try and calculate the page height. Try something like this
$(document).ready(function() {
var pageHeight = $("body").height();
pageHeight -= 200; // Whatever the height of your footer is. Make sure to subtract that out
$("#main-wrapper").css("min-height", pageHeight + "px");
});
I have two columns in an html page, one is floated right and the other is floated left.
I have set the height of both containers to 100% and the width of both containers to 50%. I want the two containers to fit the entre window. When the user re-sizes the window horizontally I don't want the content to resize. How can i achieve this?
Thanks
There is many way to achieve that. First of all, the easiest would be to put the css value min-width! So if you want it to resize but to stop at 960px (for example) you just have to do :
myCoolDiv{
width: 100%;
height: 50%;
min-width: 960px;
}
That would give you the best result. Else, if you dont want content to resize at all, and the selector to have a width equal to 100% of the initial screen, I would use jQuery that way:
$(document).ready(function() {
//Call a variable to know the width of the window
var screenWidth = $(window).width();
$('myCoolDiv').css('width', screenWidth + 'px');
});
Hope it helped! Tell me if my answer is not clear enough or if you don't understand a part of it!
Cheers!
I've got photo gallery app with a fluid layout. The #header & #controls are set to position:fixed so that when the user scrolls, they stay on the top of the window.
The div that contains all the photos, #people, is positioned below the controls with padding. On a standard 1280 x 1024 window everything looks fine.
However, when the window gets smaller, the controls wrap, and #controls gets taller. Consequently, #people then gets partially hidden.
Is there a CSS only way to make #people move to accommodate the height change? I'm fairly certain there isn't, as fixed elements get taken out of the document flow. I thought I'd ask anyway.
Update Here's an example: http://jsfiddle.net/hbms2/9/. At the default display, all the blue controls are on one line. When you resize the pane narrower, and they jump onto multiple lines, you can see "#1#,"#2",etc get covered.
Well, this is pretty simple. You set #controls to width:100% that means it will only be as wide as the window. What you should do, since it is fixed positioned, is set the sides to left:0; right:0; (so it covers the page) and the min-width wide enough to fit your controls.
body {
min-width:700px
}
#controls {
left:0;
right:0;
min-width: 700px;
}
Now when you resize the window to less than 700px, your controls will not squish together, and you can use the scrollbar to access off-screen content.
Here it is using your jsfiddle: http://jsfiddle.net/hbms2/14/
Note: I only applied the fix to the controls section, content in the other div's will still squish together since you specified their width with a percentage. (You should avoid doing that) However, you can fix it using the same method.
The control elements will still be hidden if the viewport is smaller than their width. There is no way to fix this using CSS; you would have to use javascript (which would be complicated, cumbersome, and probably wouldn't even yield the desired result) or you can make another site designed for smaller viewports. The latter is by far the better option.
Thanks for making the example like I suggested, it makes answering the question a lot easier.
The only pure CSS solution I know that will even come close are media queries, and you'll have to do a lot of trial and error, and eventually the result might not be 100 perfect.
Therefore, I resorted to JavaScript (jQuery for comfort).
You can achieve this by testing $(window).resize and changing the margin-top of the #people element to match #header's height.
Here's an example!
What I did:
$(function() {
$people = $('#people'); //Cache them to not waste
$header = $('#header'); //browser resources.
$(window).resize(function() { //When window size changes
//Check if the height changed
if ($people.css('margin-top') != $header.height() + 5) {
//Change height if it has.
$people.css('margin-top', $header.height() + 5 + 'px');
}
});
});
I am just giving it a try and I am playing around, but would something like this with dynamic heights work?
http://jsfiddle.net/hbms2/10/
Or am I completely on the wrong track here?