I want to make the content div fill in the rest of the page. But it only fills up what it has and then doesn't fill the rest of the page. Basically, if the height of the content is 20% of the view port, the div will fill in the rest of the view port with nothing (a white background with a 80% opacity). BUT it should wrap to the content if the content is more than the height of the view port. I have a the following code:
<body>
<div id="page-wrapper">
<div id="header-wrapper">
<!--Fixed size header, 180px-->
</div>
<div id="content-wrapper"> <!-- Wrapper for the content, this bit should fill the rest of the view port unless content is larger than the view port, to which this div then wraps... -->
<div id="content-banner"> <!-- A scrolling image banner with photos -->
</div>
<div id="content"> <!-- The actual content of the page -->
Some Mock content
</div>
</div>
</div>
</body>
And here is my CSS:
html, body {
height: 100%;
color:black;
margin: 0;
}
body {
background:black;
margin:0px;
}
#page-wrapper {
background:blue;
display:block;
margin-top:0px;
width:900px;
position:absolute;
left:50%;
margin-left:-450px;
height:100%;
border:thin solid black;
}
#header-wrapper {
background:green;
display:block;
margin-top:0px;
width:900px;
height:180px;
border-bottom-left-radius:75px;
box-shadow:0 0 10px #000;
}
#content-wrapper {
background:white;
display:inline-block;
position:relative;
top:25px;
width:900px;
border-top-right-radius:75px;
overflow:scroll-y;
box-shadow:0 0 10px #000;
margin-bottom:-125px;
}
#content-banner {
background:red;
display:inline-block;
position:relative;
margin:10px 10px 0 10px;
width:880px;
height:160px;
border-top-right-radius:65px;
overflow:hidden;
}
#content-banner img {
border-top-right-radius:65px;
width:880px;
height:160px;
}
#menu-wrapper {
background:green;
display:inline-block;
position:relative;
width: 200px;
margin-left:10px;
}
#content {
display:inline-block;
position:relative;
margin-top:10px;
line-height:30px;
vertical-align:top;
}
Also, before all the duplicate people come here with your linkage ;) I've already read through and tried all these questions:
Streching (sic) div to fill body
CSS: height- fill out rest of div?
Make the BODY DIV Fill the Available Area
make div fill the rest of the browser viewport
Could someone please assist me. I would like to stay away from javascript for this.
EDIT 1 : 27/09/2012 08:35 CAT
I've added a jsFiddle example to show you what I mean. It can be viewed here: http://jsfiddle.net/vwKcs/2/ I also added some missing code. Sorry about that.
There ist a pretty easy way to achieve that if you know the height of your header: use absolute positioning. The content will take the whole 100% of the height and the first element inside it has a margin-top. in this white space, you position your header again with position: absolute;
(just the code which is needed for the effect)
#header-wrapper {
position: absolute;
height: 180px;
width: 900px;
top: 0;
left: 0;
}
#content-wrapper {
position: absolute;
height: 100%;
width: 900px;
top: 0;
left: 0;
}
#content-wrapper>*:first-child {
margin-top: 180px;
}
but against Stone i have to say: please just post the code which is needed to solve your problem. I am not interested in any image paths if I have to solve a layouting issue
Related
I have a sidebar with position:fixed; on the right side of my template. I also have an overlay for the whole page. I want one element out of the sidebar(a list element) to be marked as active and in front of the overlay.
I have an example on js fiddle:
http://jsfiddle.net/t93ew/
HTML:
<body>
<div id="fixed">
<ul>
<li class="active">Test</li>
<li>Test2</li>
</ul>
</div>
<div class="overlay"></div>
</body>
CSS:
#fixed{
position:fixed;
text-align: center;
right:0;
background:#fff;
height: 100%;
box-shadow: 0 0 5px 1px #888;
width: 100px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
z-index:10;
}
ul li{
background: #000;
}
.active{
background-color:#fff;
position:relative;
z-index:11;
}
If i use float:right; for the fixed sidebar instead of position:fixed; it works like a charm. But i need the position fixed because the sidebar needs to scroll with the page and have a 100% height.
Is there any way to have a z-index inside of a fixed element?
EDIT: Like Chris mentioned its only doesn't work in Chrome
This is actually a Google Chrome bug, if you try it in other browsers it should work.
If you set #fixed to position: absolute; then it won't be behind .overlay anymore.
I am trying to make the sidebar fill the height between the header and foot. As you can see it is going behind the footer. I would like it to stop at the top of the footer. Any help would be great!
Demo at: http://www.jsfiddle.net/pEbhK/
The HTML:
<div class="header">
<h2>Development Area</h2>
</div>
<div class="sidebar">
<h2>Current Projects</h2>
<ul>
<li>iCalendar</li>
<li>MyBand - Student Center</li>
</ul>
<h2>Future Projects</h2>
<ul>
<li>Mobile Application</li>
<li>RSS Feed</li>
</ul>
</div>
<div class="clear"></div>
<div class="footer">© 2013</div>
The CSS:
html, body, h1, h2 {
margin:0px;
padding:0px;
}
.clear {
clear:both;
}
.header {
display:inline-block;
width:100%;
background:#ABBFF2;
height:100px;
border-bottom: 5px solid #7F9DEB;
text-align:center;
}
.header h2 {
padding-top:38px;
}
.sidebar {
position: fixed;
height:100%;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
.sidebar h2 {
text-align:center;
}
.footer {
position:fixed;
display:inline-block;
bottom:0px;
width:100%;
height:30px;
border-top:5px solid #7f9deb;
text-align:center;
}
Try height:calc(100% - 140px) in .sidebar
.sidebar {
position: fixed;
height:calc(100% - 140px);
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
updated jsFiddle File
A non-calc() way of doing this...
Your sidebar and footed have position: fixed, so they are positioned with respect to the view port.
You can size the sidebar using the following CSS:
.sidebar {
position: fixed;
top: 105px;
bottom: 35px;
left: 0px;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
}
The value for the top offset is the header height + 5px for the border. Likewise, the bottom offset is the footer height + 5px for its border.
See demo at: http://jsfiddle.net/audetwebdesign/Lfpxq/
Note: You may want to add a min-height to the sidebar to prevent the content overflow issues. I think the same issue arises when using the calc() method.
Or write this to .footer in the css
background-color: #fff;
hello everyone i am designing a web page. i which i want a fixed header.
For this i set position: fixed;. but when i add a anther <div> in the web page and set some top margin for it then margin of header is also changed here is my CSS for header
#header {
width:100%;
height:35%;
color:#303030;
postion:fixed;
}
and the CSS for the div below header is this
#content {
width:250px;
height:350px;
margin-left:50px;
margin-top:75px;
border-style:solid;
border-color:#303030;
border-width:1px;
}
my html
<div id="header">
Predufu
</div>
<div id="content">
</div>
I add little part of my html in this question
now in #content i set margin-top: 75px; but with this the margin of header is also changed why it is happened please tell me i need a fixed header in my web page
I changed some of the CSS attributes and it worked. First I tried with position: absolute, but it also works with position: fixed.
#header {
position: absolute;
top: 10px;
left: 10px;
width:100%;
height: 100px;
color:#303030;
background-color: #aaa;
}
#content {
position: absolute;
top: 120px;
left: 50px;
background-color: #eee;
width:250px;
height:350px;
border: 1px solid 303030;
}
See here with position : fixed --> http://jsfiddle.net/NicHope/n32Mu/
Is it this you are looking for ?
Try to add its top position to header. Also your spelt position wrong.
try this:
#header {
width:100%;
height:35%;
color:#303030;
position:fixed;
top: 0px;
}
JSfiddle Example
I have an image (base.jpg) which has the following css:
.thumb-image {
padding: 0;
border: none;
margin: 0 auto 5px;
display: block;
width: 205px;
background: #EEE;
color: #8A8989;
border-image: initial;}
<img class="thumb-image" src="base.jpg" alt="" onerror="this.src='thumb.png'">
The image height is variable. Is there anyway I can overlay another image (overlay.png which is the red image) on top of base.jpg on the bottom right cornerusing css by adding another class declaration to the above css?
Many thanks
You need a wrapper div and then absolute position the corner image.
<div id="wrap">
<img src="img/big.jpg" class="big" alt=""/>
<img src="img/corner.jpg" class="corner" alt=""/>
</div>
#wrap { position: relative; }
.big, .corner { display: block; }
.corner { position: absolute; right: 0; bottom: 0; }
There's not much you can do with just .thumb-image. If you modify the HTML somewhat, you can accomplish this fairly easily. I've put up an example here: http://jsfiddle.net/imsky/AsUuh/
This works IE8+ (with doctype), and across all other modern browsers, by using :before and generated content. You can convert it to use no modern features, but that would mean including an extra DIV inside each container. As an aside, :before doesn't work on IMG tags, so this is as minimal of markup as possible.
HTML:
<div class="thumb-container">
<div class="thumb-image">
<img src="http://placekitten.com/205/300">
</div>
</div>
CSS:
.thumb-image {
margin:0 auto 5px;
width:205px;
background:#EEE;
color:#8A8989;
border-image:initial;
position:relative;
z-index:0
}
.thumb-image img {
border:0;
display:block;
width:100%
}
.thumb-container {
position:relative
}
.thumb-image:before {
content:"";
display:block;
position:absolute;
width:100px;
height:100px;
bottom:0px;
right:0px;
z-index:1;
background:url(http://placekitten.com/100)
}
Maybe this is a problem with sticky footer, maybe not. Not quite sure. I want divs inside my footer to all line up side by side using float:left, but they seem to be stacking on top of each other, and I'm not sure why.
HTML:
<div id="footer_container">
<div id="footer_content">
</div>
<div id="footer_content">
</div>..etc
CSS:
#footer_content {
font-size:18px;
float:left;
padding:0 35px;
color:#EEEEEE;
text-align:left;
height:150px;
width:150px;
}
Plus all the usual sticky footer stuff:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#footer, .push {
height: 175px;
}
#footer_content a{
color:#989393;
}
#footer_container{
width:1100px;
height:175px;
}
You need to change the footer_content to a class instead of an id.
You cannot duplicate your element id's. Element id's must be unique, but you use id=footer_content more than once. Browsers tend to ignore subsequent elements with the same id.
Change them all to classes.
<div class="footer_content">
</div>
<div class="footer_content">
</div>
and
.footer_content {
font-size:18px;
float:left;
padding:0 35px;
color:#EEEEEE;
text-align:left;
height:150px;
width:150px;
}
Demo using your code with only that one id changed into a class...
http://jsfiddle.net/DRfuH/
Appears to be working as they are now side-by-side.