I'd like to create a DIV as big as the browser window and then show the website using vertical scrolling. The effect I am looking for is similar to the one in THIS PAGE (note the big banner that is always as big as the browser window, and the content at the bottom):
With this HTML in mind:
<div class="banner">
This banner is always big like the browser window
</div>
<div class="content">
Content of the website
</div>
This is one way to do it:
.banner {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: red;
}
.content {
width: 100%;
position: relative;
background-color: green;
}
Problem is, if I use absolute position for this DIV the content of my website start from the top of the page and is hidden by the banner.
Is there any way to implement this without using javascript?
Thanks in advance
Solution : FIDDLE
CSS:
html,body {
height:100%;
margin:0;
padding:0;
}
.banner {
height:100%;
background-color: red;
}
.content {
background-color: green;
}
Explanation :
The point is to get a base that fits the total window size. You can get this base by setting <body> and <html> tags to 100% height (they expand the total width by default). They then expand to 100% height of the parent which is the window.
So you don't need absolute position anymore to size you elements like the winow.
You can use 100% height on the first level children (in your case .banner) to have them fit the total window height. You will not have to set 100% width on most elements as they automaticaly expand the whole width (block elements like divs that are not floated and in relative or static position).
Your page will keep the default positioning and your .content div will start just under the window size .banner
Try this:
<style>
.banner {
background-color: red;
margin: 0px 0px 0px 0px;
padding: 0px;
}
.content {
width: 100%;
margin: 10px 0px 0px 0px;
padding: 0px;
background-color: green;
height: 100%;
}
</style>
Related
I'm new to CSS.
trying to study some layouts and ran into this issue.
in HTML. I've got
<div id="wrapper">
<aside id="sidebar" class="left">
</aside>
<div class="content">
Lorem ipsum blah blah (cutted: about 100lines)
</div>
<aside id="sidebar" class="right">
</aside>
</div>
I'm trying to prevent the left and right sidebar(aside) from scrolling. No matter how much I scroll the main, it will always stay there; I've set its position to fixed and it looked all fine. the issue is, the main content is overlapping with the right sidebar(aside) when resizing. I've tried position: relative and absolute to the right and changing it to div but nothing happens.
the goal is - when my chrome browser shrinks, it should show the Horizontal/vertical scrollbars without any overlapping of main contents. no matter how long my main content is, the sidebars should always be there! Thank you in advance!
CSS below
body, html {
font-family: Helvetica;
background-color: rgba(0, 0, 0);
}
#sidebar {
position: fixed;
width: 400px;
height: 100%;
margin-top: 120px;
top: 0;
}
.left {
left: 0;
bottom: 0;
background-color: rgb(82, 50, 50);
}
.content {
display: inline-block;
background-color: rgb(255, 255, 255);
margin-top: 120px;
top: 0;
width: 800px;
height:100%;
margin-left: 400px;
margin-right: 400px;
}
.right {
right: 0;
bottom: 0;
background-color: rgb(255, 217, 0);
}
#wrapper {
margin-left:0;
margin-right:0;
max-width: 1600px;
border:1px solid white;
}
You need to give the .content a dynamic width instead of the static one you've set.
Try this
.content {
width: calc(100% - 400px - 400px); /* where 400px and 400px are the width of the sidebars */
}
The problem is you are using position: fixed and you are using px:
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.
By using the px, the element size will always be 400px even though the window size is very small. To prevent the content from overlapping to others and keep the same ratio with other elements, you should use % which is the percentage for the container's size and it will keep the same ratio between the aside and div no matter the window size.
Another soluation is to you media screen
The #media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
Check more here
If you want to prevent aside from scrolling, just use:
aside{
overflow: hideen
}
So, I know this is something that has troubled others before me, but I simply cannot make it work. I am currently working on a 1000px width centered background that should go on for the entirety of the page. With height:100%; I can get it to fill the entire screen, but if I have Divs within that requires scrolling, the background is missing at the bottom.
I have searched the internet to solve this problem and have found a bunch of solutions, though none seem to work for me. Among them:
Change body position to relative.
Change body and or HTML to 100% height and 100% min-height (and every combination between).
Change the position of my Divs to all the available positions (absolute, fixed, relative etc.)
Try to use table at the Body and then table-rows for my divs.
All the various overflow opportunities (I am not interested in scrolling within my Divs)
And many more.
Here is my code.
HTML
<body>
<div class="headerMenu">
<div id="wrapper">
something
</div>
</div>
<div class="signMenu">
<div class="div_one">
something
</div>
<div class="div_two">
something
</div>
</div>
</body>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height:100%; }
.signMenu {
padding-left: auto;
padding-right: auto;
width: 1000px;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: white;
height:100%; }
.div_one {
background-color: rgb(250, 250, 250);
height: 1250px;
width: 400px;
position: absolute;
top:105px;
left: 0px;
margin-left: 30px;
}
.div_two {
background-color: rgb(250, 250, 250);
height: 1200px;
width: 400px;
position: absolute;
top:120px;
right: 0px;
margin-right: 30px;
}
Forget the headerMenu and wrapper for now. The point is, that if/when div one and two exeeds the height of the screen then the scroll bar appears, and when I scroll down the white background from the signMenu goes no further. I want that background to fill the enitire page (with scrolling down no matter how long), and not just the specific window size, which it does with height: 100%;.
I hope that makes sense. I am kind of new to this. Thanks in advance!
How to automatically adjust size of the div which is horizontally centred, using another div which has position: fixed property?
To better understand what I mean please take a look at the picture below. Div A is a fixed div with a fixed size and div B is a div which is horizontally centred. I want div B to resize (when I resize browser window) in a such way so right border of A and left border of B never overlap (ideally, if the distance between the borders kept the same).
I know that this can be fairly easy done using JavaScript by reacting on resize events, but I'm wondering is there any way to achieve this in pure CSS?
Here's another way. This should work in older browsers too.
<style>
div {
border: 1px solid red;
height: 100px; }
#A {
position: fixed;
width: 150px; }
#B {
margin: 0px 155px; }
</style>
<div id="A">Stuff</div>
<div id="B">Stuff</div>
How about this:
#a{
width:200px;
}
#b{
width:calc(100% - 400px);
}
Just set the width of B to be 100% of screen width minus twice the width of A and their borders will touch.
When an element is given the settings position: absolute or position: fixed You can change the width of an element by using the left and right properties.
Simply add the same amount to the right as you would to the left
#left {
position: absolute;
width: 150px;
}
#middle {
position: absolute;
left: 165px;
right: 165px;
overflow: auto;
}
/* For demo purposes */
html, body, div { height: 100%; margin: 0; } div { background: red; } #overflow { height: 200%; }
<div id="left"></div>
<div id="middle">
<div id="overflow"></div>
</div>
I've a html structure like:-
<body>
<div class="header">header</div>
<div class="content">
hello
</div>
<div class="footer">footer</div>
</body>
And the applied style on it are:-
<style>
body {
padding: 0px !important;
margin: 0px !important;
}
.header {
height: 30px;
background: gray;
}
.footer {
height: 30px;
background: green;
position: fixed;
bottom: 0px;
width: 100%;
}
.content{
background: yellow;
}
</style>
What I want is, the content div's height will be equal to the full height of the window except the header & footer part. Currently I'm just seeing a small yellow strip for the content part, as the text within it very minimal, the rest of the page is white. I want, the content div will occupy that place. I tried to use height : 100%; in the content div, but it didn't work. please help.
Try to modify your content class like:-
.content{
background: yellow;
position: fixed;
width: 100%;
top: 30px;
bottom: 30px;
}
The top and bottom is 30px as the height of header and footer is 30px. it'll work for you.
Try making a div class="wrapper" that surrounds your div class="content"... In the css give the .wrapper 100% width and height. I hope that helps.
I am experiencing some strange behaviour when attempting the following (see jsfiddle: http://jsfiddle.net/9nS47/).
HTML:
<div id="slider">
<div id="wrapper">
<div id="navigation"></div>
<div id="container">
<div id="button"></div>
</div>
</div>
</div>
CSS:
HTML,BODY
{ width:100%; height:100%; }
* { margin: 0; padding: 0; }
#slider
{
position: fixed;
top: 0;
bottom: 0px;
left: 100px;
overflow-y: auto;
background-color: red;
}
#wrapper
{
position: relative;
height: 100%;
background-color: #000000;
min-height:400px;
}
#navigation
{
display: inline-block;
width: 80px;
height: 100%;
background-color: #0000FF;
}
#container
{
display: inline-block;
height: 100%;
background-color: #00FF00;
}
#button
{
width: 22px; height: 100%;
float:right;
background-color: #CCFFCC;
cursor:pointer;
}
What I am trying to do is making a left side navigation bar that spans the whole visible window height and only Shows a scrollbar if its height is smaller than for example 400px. The scrollbar for that div seems to be always visible due to some resizing problems (there is an extra pixel at the bottom I can't explain[color:red]).
Firefox also moves the second child element below the first when the scrollbar is visible because the scrollbar seems to be part of the content area and thus takes up to around 20px space. This does not happen if Overflow: Auto is replaced with Overflow: scroll however.
ATM changing the layout (specifically the Container with Position: fixed) is not an option.
Don't mind the space between the green and the blue box. Seems to be a whitespace problem.
Since it seems like you are unable to change your 'wrapper' code much, I tried to change your original code as little as possible. In fact, the only thing I did was to add some jQuery.
Check out this updated jsfiddle. I have included jQuery and the javascript I added was this:
$(window).bind("load resize", function(){
//this runs as soon as the page is 'ready'
if($(window).height() < 400){
$("#slider").css("overflow-y","scroll");
}else{
$("#slider").css("overflow-y","hidden");
}
});
Basically, 'onload' and 'onrezise', the jQuery figures out if you should show the scrollbars or not.
The reason that your "auto" isn't working is because of the "fixed" position of the slider element. The browser cannot perfectly figure out the heights.