I have a dashboard left, and need that dashboard to be in the same size of the page, everytime it needs to get bigger i want to apply the scroll, at the moment i am doing something like this:
style="overflow-y: scroll; height:450px;"
this is applied to all my section, the thing here is that i set the height a value, i tried with height auto and 100%, but without success, any help with this?
my page is getting bigger because of that dashboard if i cant mantain the page size and give it a scroll it would help a lot
Thanks
you can try to set the min-height:100%
Is something like this appropriate.
body{
padding:0;
margin:0;
}
.a{
display:block;
position:absolute;
top:0;
left:0;
width: 20%;
height:100vw;
overflow:auto;
background-color:purple;
padding:0;
margin:0}
.b{display:block;
width:80%;
background-color:pink;
padding:0;
margin-left:20%;
min-height:100vw}
<div class="a">
</div>
<div class="b">
content
</div>
Use height: 100vh; // viewport height
Check compatibility here
http://www.caniuse.com/#search=vh
And if you want to support old browsers calculate "$(window).height()" and assign it to this div
Related
I'm just looking for some advice on my approach to cloning a website. To improve my CSS skills, I've found a website that I'm basically trying to copy in order to get used to CSS syntax ect.
For the divs inside the wrapper, I'm given widths of 100% for them all, and a total height of wrapper 100vh. Between all the divs I've tried to 'approximate' what the height for each div would be - meaning I'm doing it manually. It looked well and good until I added an image (taken from the website) and inserted it into the div image. This resulted in only a portion of the image showing within the div, clearly my height approximation wasn't right. Meaning I had to give it more height, and the others divs less height to make it work. Clearly this isn't a great approach and was hoping for someone to suggest a better way.
<div id = "wrapper">
<div id = "header">
</div>
<div id = "navigation">
</div>
<div id = "image">
</div>
<div id = "repairs">
</div>
<div id = "whitespace">
</div>
<div id = "footer">
</div>
</div>
CSS
#wrapper{
width:100%;
height:100vh;
background-color: black;
margin:0;
padding:0;
}
#header{
width:100%;
height:4vh;
background-color: #ededed;
}
#navigation{
width:100%;
height:16vh;
background-color:white;
}
#image {
width:100%;
height:30vh;
background-image:url("image.png");
}
#repairs {
width:100%;
height:20vh;
background-color:green;
}
#whitespace{
width:100%;
height:20vh;
background-color:purple;
}
#footer{
width:100%;
height:10vh;
background-color:blue;
}
height: auto;
Simply add this css
You can add background-size:contain to the list of #image properties to make the background image fit completely inside the container, or use background-size:cover to make it completely cover the container.
If you use contain, you may also want to use something like background-position: center center to position it in the middle of the div.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
I'm tearing my hair apart here. Does anyone know how i can get a div to fill the screen both horizontal and vertical? I can make it fill it horizontal but it just refuses to fill vertical unless a specify the width in pixels. What am I doing wrong?
This is what I want to accomplish, without have to scroll to get the bottom-padding:
Thank you!
HTML:
<div id="main">
<div class="main_content"></div>
</div>
CSS:
#main {
margin-left:auto;
margin-right:auto;
height:100%;
width:auto;
padding-left:40px;
padding-right:40px;
padding-top:40px;
padding-bottom:40px;
}
.main_content {
width:auto;
height:100%;
background:#fff;
}
When you set a percentage height it is related to its container, that must have an explicit height. If you set height: auto, the container will take the height of its content. The parent of the div must have an explicit height property, you can set in 'px' or in 'em'. You can also set in 'vh'
you can add height:100vh;
Demo : http://jsfiddle.net/6yLhk17h/
Add the below code in your style sheet.
html{
height: 100%;
}
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;
}
I'm actually designing my website, it's going to be a one HTML page using javascript to switch between divisions.
I'm using a wrap division where my banner/header, text container and my footer are relative positioned.
I want my footer to be at least to the bottom of the window when there is not enough content, so I'm trying to put a min-height to my text container.
Like this the website would occupy at least all the windows in it's height.
My HTML code (a part ^^)
<div id="wrap">
<div id="banner"></div>
<div>
<div id="whoami" class="corpus"></div>
<div id="etc" class="corpus">There is different divisions like these, I'm switching through thoose using jQuery, but that's not important there. I'm trying to put a min-height to get the footer at the bottom of the windows if there not enough content. I can't pass the footer in absolute position</div>
</div>
<div id="footer"></div>
</div>
The CSS that goes with this
html, body {
margin:0;
padding:0;
background:#fff;
height:100%;
}
#wrap {
background-color:#ff0;
min-height:100%;
width:1000px;
left:50%;
margin-left:-500px;
position:absolute;
}
#banner {
background-color:blue;
height:150px;
width:1000px;
position:relative;
}
.corpus {
width:800px;
min-height:100%; //I tried this : min-height : calc(100% - 260px); it didn't work.
margin-left:100px;
background-color:grey;
position:relative;
height:auto;
margin-top:5px;
}
#footer {
height:100px;
width:1000px;
background-color:purple;
position:relative;
z-index:1;
bottom:0;
margin-top:5px;
}
A little Fiddle for the road :http://jsfiddle.net/yoshino78/bn455/1/
Since #wrap is a positioned element and you've already applied bottom:0 for the footer, all you've to do is
Simply apply position:absolute to the footer, so that it'll stay at the bottom of #wrap regardless of the content inside it.
Demo
Side note: you also might want to apply padding-bottom to #wrap equal to the height of footer so that content won't get hidden behind the footer
I have a website where i am using height auto to set the height of a content div and min height 100% to make sure the content div always stretches the height of the page.
my HTML looks like this
<html>
<body>
<div id="holder">
<div id="outercontent">
<div id="innercontent">
content goes here
</div>
</div>
</div>
</body>
</html>
and my css rules are as follows
html,body {
height:100%;
color:white;
}
#holder {
background-color:transparent;
width:100%;
min-height:100%;
height:auto;
position:absolute;
z-index:1;
}
#outercontent {
min-height:100%;
height:auto;
width:940px;
margin-left:auto;
margin-right:auto;
background-color:transparent;
background-image:url(../images/bowsides.png);
background-repeat:no-repeat;
overflow:hidden;
}
#innercontent {
width:900px;
height:auto;
min-height:100%;
margin-left:auto;
margin-right:auto;
background-color:#ffefce;
overflow:hidden;
}
The holder div is an absolutely positioned DIV, i need this because i have a rotating background which puts each background image on a separate absolutely positioned div. so this div is placed on top of all of them using z-index.
outer content is a little wider than my inner content and this is used to give me space put border images (since css3 border images are not widely supported yet)
inner content is my main content area
min-height 100% works on the holder div (that is the outermost div of the group), but it does not work on outercontent or innercontent in any browser
why is this?
Can you try opening the source in IE by using deleveloper tools , I guess something is overriding the height , you will get the exact picture then