I have this code:
HTML:
<body>
<div id="menu">
menu elements...
</div>
<div id="main">
Main website content...
</div>
</body>
CSS:
body{background-color:CCCCFF;}
div#menu{background-color:#000000;display:table;height:45px;}
div#main{background-color:#FFFFFF;border-radius:10px;margin:10px;}
The menu div is a horizontal menu bar.
I want the main div fill the whole page (except the menu). Also when it is needed it should fill more space (example: if it has a lot of content). I don't want to use any javascript or the calc() method of CSS.
Is it possible to do what I want?
Thank you for your time!
Yes, you can add to your CSS:
html, body {
height: 100%;
}
and than your div will correctly use height attribute with %. You can add bottom, left, right, top attributes:
div#main {
position: absolute;
overflow: auto;
bottom: 5px;
top: 50px;
left: 5px;
right: 5px;
}
check margins and paddings.
If you can use javascript, that's may be interesting to use
height: auto;
max-height: 300px; /*calculated value on resize and load*/
Related
I am creating a landing page with HTML/CSS and using a little bit of bootstrap. I am having trouble resizing my main page to fit 100% height and width when the page is opened.
I want it to look like google docs' main page: https://www.google.com/docs/about/. If you go there, you'll see:
the nav is in fixed position and follows you everywhere. I got that part down.
The main image automatically resizes depending on your screen size. The icon-arrow-hint (the arrow on mid-bottom of page) can always be seen on the bottom of the image.
Two problems that I have:
Got this weird gap on the right side even though I set right: 0.
After page load, it looks like it fits about 90% of the height and I still need to scroll down. I placed this text on the bottom - theoretically, this should be shown on the bottom of the screen without scrolling, but I have to always scroll slightly down.
This is the JSfiddle: https://jsfiddle.net/iggyfiddle/DTcHh/35435/
I am using position: absolute and I 0-ed all 4 sides.
How can I fit the yellow div 100% height and 100% width like the google page nicely?
If you give an element height: 100%, but there's another element above or below in the same container, you need to adjust for the height of the other element, otherwise there will be an overflow.
Also, adjust for the -15px horizontal margins applied by Bootstrap.
Try this:
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%; /* ADJUSTMENT */
background: yellow;
margin: 0; /* NEW */
}
https://jsfiddle.net/DTcHh/35437/
Your .primary-content div has the bootstrap .row class on it which declares negative horizontal margins. A solution would be to remove the .row class from your div or to override the margins in css.
These are the default bootstrap .row styles:
.row {
margin-right: -15px;
margin-left: -15px;
}
Using the class of .row adds a margin of 15px. A quick fix is to remove the class from primary-content div like so.
<div class="primary-content">
<div class="col-md-12">
<h1>This is a super awesome product</h1>
<h4>Help me stackoverflow, you are my only hope!</h4>
</div>
or add a class and remove the margins.
The reason that your yellow div is going too far is that you need to set the height to 90%.
To fix the weird padding on the right side, add margin: 0 !important;.
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%; // change this
background: yellow;
margin: 0 !important; // add this
}
See this JSFiddle or run the snippet below
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.universal-header {
background: red;
border-radius: none;
height: 10%;
width: 100%;
position: fixed;
}
.color-brown {
color: #58482C;
text-decoration: none;
}
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%;
background: yellow;
margin: 0 !important;
}
.bottom {
position: absolute;
bottom: 0;
right: 0;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar universal-header navbar-static-top">
<a class="navbar-brand navigation-title color-brown">
</a>
<span class="color-brown navbar-brand navigation-title">HELLO</span>
<span class="navbar-brand navigation-title pull-right color-brown">Login</span>
<span class="navbar-brand navigation-title pull-right color-brown">Features</span>
<span class="navbar-brand navigation-title pull-right color-brown">About</span>
</nav>
<div class="row primary-content">
<div class="col-md-12">
<h1>This is a super awesome product</h1>
<h4>Help me stackoverflow, you are my only hope!</h4>
</div>
<div class="bottom">
You should be able to see me without scrolling
</div>
</div>
Problem 1:
Got this weird gap on the right side
When using bootstrap's row class it will add a margin of -15px to the left and right of your div, see the second answer to this question if you want to understand better why.
Solution: don't use the row class for your primary-content div.
Problem 2:
this should be shown on the bottom of the screen without scrolling,
but I have to always scroll slightly down
you are using absolute positioning, remember that needs a relative positioned parent container, in your case, since you don't have any, everything is relative to the initial containing block, hence your viewport/window.
Quick fix: delete the height: 100%; css from .primary-content
Warning: using absolute positioning the way you are right now will bring you trouble if you want to add more content below your yellow container
I have the following attempt, trying to make a simple sticky footer.
My problem is the footer is not sicking to the bottom, I suspect it might be a css problem.
Would greatly appreciate it if someone can give the following code a scan and provide some advise.
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: red;
position: absolute;
bottom: 0;
}
<footer class="footer" id="footer">
<div class="footLeft" style="width:75%; float:left;">
</div>
<div class="footerRight" style="width:25%; float:right; padding:25px;">
<button class="btn btn-danger" style="font-size:20px;">Sign Up</button>
</div>
</footer>
The Problem Im having / Output
Add the following rules to body
body {
min-height:100%;/*or 100vh */
position:relative;
}
Explanation:
The min-height property will make sure that the body at least takes 100% of your viewport height. This way even if you have less content your footer will always stick to the bottom of viewport.
Position: relative rule is set so that the footer is positioned absolute relative to the body and not any other wrapper
You can just use this native class to achieve sticky footer in bootstrap--
<div class="footer navbar-fixed-bottom">
Another possibility is using position:fixed, without influencing the body css.
In that case the footer would be always at the bottom of the page event if a scrollbar is present
Example
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: red;
position: fixed;
bottom: 0;
}
See fiddle
I want to use three <div> areas on my web page: Header, Content and Footer.
The Footer <div> is supposed to stick to the bottom of the web page.
The Header <div> is supposed to stick to the top of the page.
The Content <div> is supposed to fill the whole area in the middle of the page.
So this is the basic layout:
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
For the Footer to stay down the page I added
#footer
{
position: fixed;
bottom: 0;
}
For the Content <div> I'm using a background image, scaling exactly to the div element's dimensions:
#content
{
background: url("Bilder/Bild.png") center contain no-repeat black;
}
Now I want the Content <div> to be exactly the remaining height of the ViewPort between Header and Footer without adding any JavaScript, no matter what content is later added to the Content <div>.
How can I do that in CSS3?
If the size of footer and header is known, you can use calc(). So assuming both take 100px together, this should work:
html, body { height: 100%; }
#content {
height: calc( 100% - 100px );
}
Be aware, though, that old browsers do not support this. Also have a look at the compatibility table for the prefixes that might be needed.
Example Fiddle
you could use something like this. it will allow you to keep your positions in a range of resolutions.
#header {
position: fixed;
height: 10%;
}
#content {
position: fixed;
height: 80%;
top: 10%;
}
#footer {
position: fixed;
bottom: 0px;
height: 10%;
}
check it out here
I want to create a webpage that has a fixed part at the bottom and, at the top, a part that will be filled dynamically with content, this dynamic part should have a scroll bar should the added content not fit, in order to stay above the fixed part.
style.css:
.action-box{
position: fixed;
bottom: 15px;
margin-top: 10px;
width: 100%;
}
index.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<!-- this will be filled with content -->
</div>
<div class="action-box">
<!-- this is the fixed part -->
</div>
</body>
</html>
You can see in this fiddle that the two divs overlap.
How can I make the first div scrollable, so that it won't slide over or below the last div?
I'll propose using dynamic resizing, depending on window height:
Here is jQuery example:
function adjustBlocks() {
var winH = $(window).height();
var boxH = $('#action-box').height();
$('#content').height((winH - boxH) + 'px');
}
$(document).ready(adjustBlocks);
$(window).resize(adjustBlocks);
Sample HTML:
<div id="content"></div>
<div id="action-box"></div>
And sample CSS:
#content{
width: 100%;
background: #eee;
overflow-y: scroll;
}
#action-box{
width: 100%;
background: #ffccaa;
}
Of course, you can easily add any margins and mention them in jQuery resizing function.
Oh, and the example on jsfiddle
The easiest way is to apply margin-bottom to the div on top that matches the total height of the fixed div at the bottom, and you have to give the div at the bottom a height along with a background color so the other div doesn't show through.
.action-box{
position: fixed;
bottom: 0px;
height: 20px;
padding-bottom: 10px;
width: 100%;
background-color: white;
}
.content {margin-bottom: 50px}
http://jsfiddle.net/RdGXt/151/
Give it a css class with a fixed height and overflow: scroll;
Goal:
A CSS two column layout with main content in the flow first followed by left nav (see example code). This is probably easier than I think but I could not find any clear cut example here or online. The left nav has to have a fixed width.
I would like to position the left nav and main content areas as you would expect (left nav then main content). This is for SEO purposes to place the content as high up in the flow as possible then position it appropriately. I need to have this work in IE6 as well. The main content area needs to expand with the browser window. With my current version the left nav is absolute positioned and overlaps the main content container. Thanks in advance for all you CSS gurus!!! Hopefully this can be of use to others as well.
<style>
.clearly {clear: both; font-size: 1px;}
.contentContainer {border:1px solid; width:800px;}
.leftNav {width:200px;background-color:#CCC;position:absolute;}
.mainContent { position:relative;left:200px;width:100%;float:left;background-color:#A6C9FF;}
</style>
<div class="contentContainer">
<div class="mainContent">
Relative Main Content - Width 100%
</div>
<div class="leftNav">
Absolute Left Nav<br />
Absolute Left Nav<br />
Absolute Left Nav<br />
</div>
<div class="clearly"> </div>
</div>
Drop the containing div.
html, body { width: 100%; height: 100%; overflow: hidden; margin:0; padding: 0; }
.mainContent
{
position: absolute;
left: 200px;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.leftNav{
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 200px;
}
http://jsfiddle.net/hFAaZ/
P.S. this has an advantage over the other answer in that any backgrounds applied to either nav or content areas will always fill the page. This is usually what is expected from the designer.
Edit
Just noticed that you need a fixed width on the container. Add .container to the html,body list above, then also add another rule to ste it's width to 100%;
Is this what you are after:
http://jsfiddle.net/Mutant_Tractor/8uws6/
Simple semi-fluid + fixed layout:
Fluid column:
padding-left: 170px;
Fixed:
width:150px;
float:left;
background:red;
position:absolute;