This is my html site https://dl.dropboxusercontent.com/u/168659703/kappe/without_sidebar/index.html
Currently it is not fit to the full screen. I could not understand how it is calculate the height of the screen. I want that it will fit to the full screen. That means no horizontal scroll bar. Please tell me how can i do that?
body
{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
}
You can use something like this,
body
{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
Related
This is my general wrap:
.wrapper{
width:80%;
height:100%;
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
Inside from this wrap, I have two wrappers more, navigation and entries.
.wrapped-nav{
width:30%;
height:100%;
background-color:#333;
float:left;
padding-top:80px;
text-align:center;
}
.wrapped-ent{
width:70%;
height:100%;
background-color:#666;
float:left;
}
But when my content in the nav section it's outside and the scroll show up in the navigator, my wrap not wraps up my content.
I add this picture from the problem:
Edit: https://jsfiddle.net/qjLthkg2/
Because you're using position:absolute; for the container.
absolute items are taken out of the normal page flow. They are like a ghost and won't expand based on the contents of it, so the inner content just flows down.
You need to rethink your styling.
I'm new to stackoverflow, and coding in general really, so I apologise in advance if its a really stupid question or I've missed something obvious.
I'm having an issue when I set a fixed position for a div, and combine it with auto width.
The CSS i'm using:
.headwrapper{
height:100px;
width:auto;
margin-left:90px;
margin-right:90px;
position:fixed;
min-width:1020px;
}
When don't include the position:fixed; it all works fine and the width is calculated automatically with 90px margins. However when I include the position:fixed; the auto width doesn't work and the width goes back to the minimum 1020px.
Is there anyway to fix this so the div can change width while fixed in position?
Thanks in advance,
Tom.
Fix your left and right due to you are using position:fixed.
Add this lines to your class:
left:0;
right:0;
Try this code wrapperDiv
<div class="wrapper">
<div class="headwrapper"></div>
</div>
.headwrapper {
height:100px;
width:100%;
background:yellow;
position:absolute;
left:90px;
right:90px;
}
.wrapper {
margin:0 auto;
width:100%;
height:100px;
background:red;
position:fixed;
}
Hi I'm looking to create a 3 column responsive layout where one of the column (sidebar) is in fixed position.
Both sidebars have a width set in percents and also min & max-width properties in pixels.
And I want that the content in the middle to fill all the space between the two sidebars please.
I beleive I can calculate the width of the sidebars using JS but I'm looking for the best approach hopefully using only CSS please.
It needs to support only IE9 not below.
I'm attaching a drawing for better understanding and will appreciate your help.
Tried a JsFiddle. Please see if it's what are you looking for.
Here the html code:
<header>Fixed Header</header>
<div id='container'>
<nav>Navigation</nav>
<article>Article</article>
<footer>Footer</footer>
</div>
<aside>Fixed Aside</aside>
and here the css:
body
{
text-align:center;
padding:0;
margin:0;
}
header
{
height:50px;
background:rgb(200,200,0);
position:fixed;
top:0;
left:0;
width:100%;
}
aside
{
height:50px;
background:rgb(200,0,0);
position:fixed;
top:50px;
right:0;
width:20%;
height:700px;
}
#container
{
margin-top:50px;
}
nav
{
width:20%;
float:left;
height:700px;
background:rgb(200,100,100);
}
article
{
padding-right:20%;
}
footer
{
clear:both;
padding-right:20%;
width:80%;
background:gray;
height:50px;
}
You should try Bootstrap classes, they work perfectly
I've made my website background image stretch 100% width and height of the browser window, by applying a background image to the body, and remain fixed position. Also, I've created borders that will also remain fixed, using this method: http://css-tricks.com/body-border/
It works ok as you can see here: http://br-webdesigner.com/test/
The only problem is, the background image is stretching right to the edges of the browser window, instead of to the bounds of the body element (or the green area), even though I've got 10px padding on the html element.
It seems making background-size 100% makes the size 100% of the browser window, not of the containing element.
Is there a way to get around this?
Thanks,
So I altered your CSS a bit try using this:
html{
}
body{
padding:30px;
background:url(images/bg2.svg) no-repeat fixed;
background-size:100% 100%;
margin:0;
}
.site-border{
background:#352e2e;
z-index:10;
}
#top{
position:fixed;
top:0;
left:0;
width:100%;
height:10px;
}
#bottom{
position:fixed;
bottom:0;
left:0;
width:100%;
height:10px;
}
#left{
padding:10px;
position:fixed;
left:0;
top:0;
width:10px;
height:100%;
}
#right{
padding:10px;
position:fixed;
right:0;
top:0;
width:10px;
height:100%;
}
I'm sure this has been asked before but I couldn't find it.
Please see http://jsfiddle.net/Bw5j4/1/
I want to make #room div to fit 100% between #top and #commands even if there is no content in it.
And, if the content overlaps (as in current example) I want to fit it within borders of #room with scroll.
I need to keep #commands stuck to the bottom of page. I've tried height, max-height but it didn't work.
This should get you started to lock in the middle section
.room {
background-color:#fff;
border:1px solid #d8d8d8;
overflow:auto;
position:fixed;
top:80px;
bottom:150px;
left:0;
right:0;
}
You'll need to use JavaScript for this, unless the page is guaranteed to always be the same size and can't be resized. If that is the case, you can just explicitly set the height on .room. Otherwise:
function setRoomHeight() {
$(".room").height(
document.documentElement.clientHeight
- $(".top").height()
- $(".commands").height()
- 20);
}
$(setRoomHeight);
$(window).resize(setRoomHeight);
http://jsfiddle.net/gilly3/5TzFm/
(is jQuery ok, or would you prefer a non-jQuery example?)
This is what lazy* developers use tables for. It's very easy to get these fluid layouts like this. Without tables, it's more difficult.
I think perhaps this is something like what you want: http://jsfiddle.net/thomas4g/6u7ry/13/
<div id="wrapper">
<div id="top">Top Stuff</div>
<div id="content">
My Epic Content
</div>
<div id="bottom">Bottom Stuff</div>
</div>
#wrapper
{
height:700px;
background-color:teal;
position:relative;
padding-top:50px;
padding-bottom:50px;
}
#content {
height:700px;
background-color:red;
overflow:auto;
}
#top {
position:absolute;
top:0;
left:0;
height:50px;
width:100%;
background-color:yellow;
}
#bottom {
position:absolute;
bottom:0;
left:0;
height:50px;
width:100%;
background-color:yellow;
}
*granted, just because you use tables doesn't mean you're lazy. It's just often true. No offense intended.