I have this simple navigation bar and an image view underneath. I want the image view's height to be as heigh as the amount of space left without scrolling. If you get what I mean? I thought I could just set the height as 80% or something but nothing changes.
Structure:
<div id="page">
<div id="navigation"></div>
<div id="content-container">here's my image view</div>
</div>
I want the content-container's height to be what's left of the page. If I set my page 's height to 50% nothing changes either..
This is the website
Edit: found it:
body, html{position:absolute; height:100%;}
#page{position:relative; height:100%;}
#content-container{height:89%;}
try this
#navigation {
position: relative;
z-index: 10;
}
#content-container {
overflow:hidden;
position: absolute;
top: 70px; /* #navigation's height */
left: 0;
right: 0;
bottom: 0;
}
Related
I have an underlay and a registration div inside it. The inner div content is dynamic based on registration step.If the content expands in height it becomes scrollable. The problem is that the scroll only works if the mouse is focused/hovered on inner-div. I want it to be able to scroll even if I have my mouse outside inner div (hovered on underlay). Is that possible? and how?
.underlay {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: #eaeaea;
}
.inner-div{
position: relative;
z-index: 3;
}
Problem was in the html code:
<div class="registration">
... content
</div>
<div class="underlay"></div>
Solution was an simple embedment:
<div class="underlay">
<div class="registration">
... content
</div>
</div>
I'm trying to make a navbar that has a fixed position and has elements inside of it that are also fixed:
.navbar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
}
.content-area {
overflow: scroll;
}
.top-area {
height: 100px;
position: fixed;
top: 0;
}
I have two areas that should be fixed to the top and the bottom and a content area in the middle that's overflow scrolls under the bottom area. When I add position: fixed; to .top-area or .bottom-area they disappear to the top. Why can't I fix an element onto the navbar?
The html looks like this:
<div class="navbar">
<div class="top-area">
</div>
<div class="content-area">
<p> Content here </p>
</div>
<div class="bottom-area">
</div>
</div>
Fixed Elements are taken out of the normal flow of html page. Try to set the z-index value to these classes. Give higher e.g. z-index: 100 to those which you want to be on the top.
If you could show your html, I could fix it more precisely for you :).
I have a document structure that maintains the header at the top of the page and the footer at the bottom. It's working well as long as the content in the middle is less than the height of the window. If the content is too long, the footer gets pushed further down the page and a full body scrollbar is displayed.
How can I get the scrollbar to be limited to the content DIV.
Note that the content of the header and footer are not fixed so I don't know the height of those elements and can't set the top position of the content element as a fixed value. I've added a show/hide feature in the example to demonstrate this.
I'm trying to resolve this in pure CSS (avoiding Javascript). I know that using javascript, I could monitor changes to window size and element visibility, I could calculate the height of the header and footer and set fixed dimensions to the content element. But is there a non-javascript solution?
http://jsfiddle.net/sA5fD/1/
html { height: 100%; }
body {
padding:0 0;
margin:0 0;
height: 100%;
}
#main {
display:table;
height:100%;
width:100%;
}
#header, #footer {
display:table-row;
background:#88f;
}
#more {
display: none;
}
#content {
display:table-row;
height:100%;
background:#8f8;
}
It should work for all modern browsers, desktop, tablets and mobiles. For old browsers, a full body scrollbar would be ok.
If you add two wrap blocks:
<div id="content">
<div id="content-scroll-wrap">
<div id="content-scroll">
content...
Then use CSS:
#content-scroll-wrap {
position: relative;
height: 100%;
}
#content-scroll {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: auto;
}
http://jsfiddle.net/sA5fD/8/
Don't know about support in old browsers. IEs might need some fixes.
For future visitors:
HTML
<div class="parent">
<div class="child">
<div class="large-element> </div>
</div>
</div>
CSS
.parent {
height: 1000px
overflow-y: scroll;
}
.child {
background-color: royalblue;
height: auto;
}
.large-element {
height: 1200px;
}
In this scenario, the child element will create an overflow. Since the child's height is set to auto, it will stretch out to fill the container. If you had set it to 100%, it would only go 1000px, leaving some white space beneath!
Here is a pen: https://codepen.io/meteora/pen/JJYoZM
This should work in all browsers :)
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
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;