Check out my fiddle:
http://jsfiddle.net/uvk80oob/
.content {
width: 70%;
height: 100%;
float: left;
bgcolor: #f8f4eb;
}
.sidebar{
width: 200px;
height: 100%;
float: left;
background: url(http://i.imgur.com/S0I0UaN.png) repeat left top;
}
I am trying to make a simple layout for my personal use, and learning purposes. Having tried this for over three hours now, this is the closest I can get. I need the sidebar background image to be of 100% height. Also, I need the content width to be 100%.
Basically, the content div needs to be 100% at all times, and the sidebar background image could be fixed for all that matter. But it needs to be of 100% height.
Anyone who could point me in the right direction? Thanks very much in advance!
Check this approach:
http://jsfiddle.net/uvk80oob/4/
...you can wrap the sidebar and content in a wrapper element and use:
.wrap {
display:table;
height:100%;
}
.wrap > div {
display:table-cell;
height:100%;
}
Related
I have a Div with auto height and 100% width .Now inside this Div I have to display one more Div with remaining width available in the parent Div and 100% height (Div Should be displayed in full page after the button of the parent Div got ended).Also i want to show the Second Div with border so that any one can know the expansion of the DIV by seeing it.
Here is the css that i am trying to add for border in Div..
border: 2px solid;
border-radius: 25px;
Border is coming in the Div but Div is not getting displayed in Vertical .Its getting displayed in horizontal..Here is the Fiddle Link..
FIDDLE
Please help to resolve it ..
Thanks ..
Not 100% sure I got your request. Here's my guess:
.verticalDiv
{
position:relative;
height:auto;
width: 100%;
border: 2px solid red;
}
#computationOperation
{
position:relative;
width: 100%;
display:block;
min-height: 100px;
height: auto;
}
The Fiddle
Let me know it that helped!
Done entirely understand what you are trying to do, but is this what you are looking for?
http://jsfiddle.net/5pqqeuhy/
body, html{
height:100%;
}
.verticalDiv
{
position:relative;
height:100%;
width: 100%;
}
.computationOperation
{
position:relative;
height:100%;
width: 100%;
}
you need to set the height of html and body to 100% because by default they do not expand to the full height of your browser
I'm working on a web design project for one of my classes. I cannot figure how to make the divs go down the whole page (the color)
http://jsfiddle.net/vmm1s4Lt/
http://codepen.io/bmxatvman14/pen/fihwD
Excerpt:
nav {
background: black;
color: white;
float:left;
width:20%;
height:800px;
display:inline-block;
/*margin-top: 40px;*/
padding-bottom: 40px;
position: relative;
z-index: 10;
}
#main {
background-color:#04cfe1;
float:right;
width:80%;
/*margin-right:10px;*/
}
Notes: I'm a pretty moderate coder, so I have tried height: 100% and that didn't do anything.
I'm trying to make the black side bar go all the way, and the blue span across the rest of the page.
Full page site: http://rubergaming.com/project/
Thanks a ton!
You can achieve this by using height 100%, but you may have forgotten that you also need to give container elements a height of 100% in order for that to work when you are giving your #main div that 100% height. I also slightly modified some of your other styles, you may need to tweak as needed. http://jsfiddle.net/ngz6e5p1/.
/*Give containing elements, as well as our main div, a height of 100%*/
html, body, #wrapper, div#main {
height: 100%;
}
/*This is overriding styles you already had - I changed the nav's height from 800px to 100%, and removed padding which will cause there to be an extra white space under the main blue nav if present */
nav {
height: 100%;
padding-top: 0px;
padding-bottom:0px;
}
What do you mean for the black bar to go all the way? And to span the blue div across the rest of the page try this:
<div id="main" style="
position: absolute;
margin-left: 20%;
bottom: 0;
top: 0;
">
//ALL THE OTHER STRUFF INSIDE THIS DIV
</div>
I have this layout:
http://jsfiddle.net/spadez/BN9KJ/2/
It works by having an optional left column. How can I get the column colour extend all the way down the page even if there isn't enough content to fill it.
I was thinking it would be something like this:
height: auto;
But that doesn't seem to work
add the following css
html,body{
height:100%;
}
and then apply height: 100% for the divs
working fiddle
The Logic: setting the height of the body,html element,because it is the parent element..!!
BUT why should we give both html and body --> height:100% ??
the answer is https://stackoverflow.com/a/6654996/2967572
Body looks to its parent (HTML) for how to scale the dynamic property,
so the HTML element needs to have it's height set as well.
just give
#left_column {
width: 250px;
background-color: orange;
float: left;
height:100%; //added
}
along with
html,body{
height:100%;
}
DEMO
BUT
However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.
it will be good alternative to give min-height
#left_column {
width: 250px;
background-color: orange;
float: left;
min-height:100%; //added
}
DEMO with Min-height
I'm working on a website that fits perfectly in the browser window. Below is a basic blueprint of the website layout:
So far, the Red area is just display:block. The Green area is also display:block with margin-right:200px. The Blue areas(nested in a div) is float:right.
So I've got the width sorted. It's the height I need advice on. The Red and Dark Blue areas are a set height, but I need the Green and Light Blue areas to fit the height of the browser window view.
I'm trying to use box-sizing, but it exceeds the height of the window view because it's extending to the max height of the window. Sorry for my poor explanation. Any advice if would be excellent. Thank you!
For green div set height: calc(100%-{red-div-height}); and for the light blue div set height: calc(100%-{dark-blue-div-height}-{red-div-height});
This is kinda the legacy version of C-Link's answer.
jsFiddle and fullscreen
This has the limitation of any content falling below one page-full falling outside of its container (you can see if you scroll down in the fiddle, but not on the fullscreen).
Make sure our page stretches to its full height.
body, html { height: 100%; width: 100%; margin: 0; padding: 0;}
Set a static-height header.
header {
height: 101px;
background: red;
}
Create a box for everything under the header. You were on the right track with the box-sizing. We can add padding to it, in the same amount as our header. Then percentages inside it work nicely.
.content {
position: absolute;
box-sizing: border-box;
padding-top: 111px;
padding-bottom: 10px;
top: 0; left: 0;
height: 100%; width: 100%;
}
We float our aside (may or may not be the correct element, depending on contents) and set some styles on it.
aside {
float: right;
width: 20%;
height: 100%;
padding-bottom: 111px;
box-sizing: border-box;
}
.top {
height: 100px;
background: blue;
}
.bottom {
margin-top: 10px;
height: 100%;
background: skyblue;
}
This is our main, large, content area, which we float to the left. The width could be specified exactly if we wanted exact padding at the cost of additional HTML.
[role="main"] {
width: 78%;
background: limegreen;
height: 100%;
float: left;
box-sizing: border-box;
}
You can also set overflow-y: auto on our main or aside elements, to have them scroll when they run out of space. There should also be mobile styles for this page that remove the floating, absolute positioning, absolute styling, and widths should be nearly 100%.
you can always set the green box height to the window height minus the red box height.
accordingly the light box height to the window height minus the (red box height + the dark blue box height)
Edit 1: I haven't mentioned that has to be done with javascript.
Edit 2: Consider any paddings and margins too.
Could you not just give the divs a max or min height depending on their purpose?
I use a main container or wrapper div that the others would be contained in, that div is then my effective page or screen area.
<div id="wrapper">
<div id="content">
<div id="sidebar">
</div>
</div>
</div>
#wrapper{
min-height: Whatever value you want here;
max-height: Whatever value you want here;
}
It might be a good idea to set up your page using main container divs, hot only for the content but for the header and footer as well.
As an example, I have a main wrapper that is the whole page, within that is the header div, the content div, the nav div and the footer div. These are the main ones. Everything else can then be contained within them.
So, you can set the layout out using percentages so you have a fluid design that'll react to each browser size. The other elements will then 'fit' inside the main divs and be constrained to them. You may need to look into positioning etc but this is certainly the direction you should head towards.
<div id="wrapper">
<div id="header">Header Here including any divs to be contained within this space</div>
<div id="content">All content etc here</div>
<div id="nav">This is your sidebar</div>
<div id="footer">Footer, as per header</div>
</div>
Then use the css to re deisgn the above layout focusing only on those main divs. Use % instead of px to maintain fluidity.
#wrapper{
width: 100%;
height: 100%
}
#header{
width: 100%;
height: 20%
}
#content{
width: 70%;
height: 60%;
float:left;
}
#nav{
width: 30%;
height: 60%;
float:left;
}
#footer{
width: 100%;
height: 20%
}
A pretty common trick is to give the green (and light blue) box absolute positioning, a padding AND a negative margin. Because 100% width is relative to the containing box (could be a parent div, or just the window itself) this is not suitable. When the header was a relative height, say 10%, it would've been easy. The padding makes sure the content will not disappear behind the header, the negative margin puts the box back in place. Don't forget the z-index (otherwise the content (green part) will overlap the header).
The css looks like this:
.header { position: absolute; width: 100%; height: 100px; background: red; z-index: 1; }
.content { position: absolute; width: 100%; height: 100%; padding: 100px 0 0; margin-top: -100px; background: green; z-index: 0; }
The fiddle looks like this: http://jsfiddle.net/2L7VU/
I'm trying to get a simple solution for this layout.
This is the simplified html.
<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>
Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it's too long, the whole page should be scrollable.
Is this possible easily? Maybe changing something in the layout?
here's your solution: http://jsfiddle.net/S4akv/1/
You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.
With a header and footer, you also don't want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don't want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won't change or the footer won't move.
The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.
the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html
body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle { }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }
If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least :)
edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer