One example is better than a thousand words, so here you go:
https://jsfiddle.net/jesuxapo/os53cyc1/
As you can see, the height is responsive, but not completely. The problem is the <div id="k"> with fixed height of 150px. Try to play with it and I think you'll understand exactly what I mean. I want to get rid of this 'problem' somehow.
I could use the calc() of the css3, however it's not cross-browser(especially android and IE8-9).
Perhaps there's some other solution for this using html and css languages?
You may use the display:table properties (IE8 and later):https://jsfiddle.net/os53cyc1/1/
it will grow if content is more than 100vh all together
html, body {
padding: 0;
margin: 0;
height: 100%;
background: #333;
font-weight: bold;
color: #fff;
}
body {
display:table;
width:100%;
}
body>div {
display:table-row;
}
div {
border: solid 2px #FFFF00;
}
div#a {
position: relative;
background: #800000;
width: 100%;
height: 100%;
}
div#b {
position: absolute;
top: 0;
}
div#c {
position: absolute;
bottom: 0;
}
div#k {
height: 150px;
background: #008000;
}
<div id="k">
Hello, I'm K and I just broke your code
</div>
<div id="a"><br><br><br><br>
This is relative div with height of 100% and max-height of 500px
<div id="b">
This div is aligned to the top of the Red div
</div>
<div id="c">
This div aligned to bottom of the Red div
</div>
</div>
Related
I'm trying to have an child element (something like a toolbar) of a parent element to be positiond on its bottom edge. The bahavior should be the same as using position fixed for the browser view.
I'm using absolute position right now. Everyting is perfect until the parent needs to scroll its content. Then the toolbar moves along with the rest of the parent's content.
Could somebody explain me why the toolbar moves?
Is it possible to achieve that task without need any javascript?
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 100px;
height: 150px;
overflow-y: auto;
border: 1px solid black;
}
.mock {
height: 200px;
background-color: red;
}
.tool-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: blue;
}
<div class="container">
<div class="mock"></div>
<div class="tool-bar"></div>
</div>
The toolbar is inside the scrollable area, that's why it scrolled. Try this code:
HTML
<div class="container">
<div class="scroll">
<div class="mock"></div>
</div>
<div class="tool-bar"></div>
</div>
CSS
div.scroll { /* style of .container to scroll */ }
I have found an interesting fiddle that may help you. They are using position:fixed and the divs are not nested:
http://jsfiddle.net/b2jz1yvr/
<div class="fixedContainer">
This is experimental
</div>
<div class="otherContainer"></div>
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
.otherContainer {
height:1000px;
background-color:#bbb
}
This is the code: https://jsfiddle.net/twy161er/6/
HTML:
<div id="top">
Logo. Menu
</div>
<div id="content">
Text Text Text
</div>
<div id="bottom">
Text in the bottom
</div>
CSS:
#top {
width: 100%;
height: 100px;
background-color: red;
}
#bottom {
width: 100%;
height: 100px;
background-color: blue;
margin: 0;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
}
#content {
}
I want the "content" div to be in the center and in the middle of the page.
How should I do it?
Create a parent div .main for the three DIV and add a wrap DIV tag for content text and use display table table-row table-cell.
html, body {
height: 100%;
margin: 0;
}
.main {
display: table;
width: 100%;
height: 100%;
}
.top {
height: 0; /* make it dynamic */
background-color: red;
display: table-row;
}
.bottom {
height: 0; /* make it dynamic */
background-color: lime;
display: table-row;
}
.content {
display: table-row;
vertical-align: middle;
background: yellow;
}
.content div {
text-align: center;
vertical-align: middle;
display: table-cell;
}
<div class="main">
<div class="top">
Logo. Menu<br />
Dynamic content
</div>
<div class="content">
<div>Text Text Text</div>
</div>
<div class="bottom">
Text in the bottom<br />
Dynamic content
</div>
</div>
Jsfiddle demo : https://jsfiddle.net/twy161er/15/
Why use display:table? Because the content text always show even if the window height less than 200px; and you get IE8/9 support.
That is pretty simple!
You can make the contents of the #content like this:
<div id="content">
<div>Text Text Text</div>
</div>
Then, all you need to do is add this CSS:
#content {}
#content div {
position: absolute;
padding: 0;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Explanation
You firstly absolute your text. Then, you reset the margin and padding of the element <div>. What you do then is, push the inner <div> down by 50% of the page height and push left by 50% of the page width. Then, you have to move it towards the left, 50% of its width, and move it towards the top, 50% of it's height. That way, you can get the exact center of the <div>.
Working example: JSFiddle.
CSS rule "margin: auto" to the #content div should put it on the middle horizontally.
In order to put it in the middle of the screen, try:
#content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
taken from here How to position a div in the middle of the screen when the page is bigger than the screen
Notice that your top and bottom divs are in absolute position, so no way to tell the #content div to position itself relatively to them.
Your content is missing reference to id "#".
And i hope this is solution to your problem.
#content {
display: table;
margin: 0 auto;
}
I've a html structure like:-
<body>
<div class="header">header</div>
<div class="content">
hello
</div>
<div class="footer">footer</div>
</body>
And the applied style on it are:-
<style>
body {
padding: 0px !important;
margin: 0px !important;
}
.header {
height: 30px;
background: gray;
}
.footer {
height: 30px;
background: green;
position: fixed;
bottom: 0px;
width: 100%;
}
.content{
background: yellow;
}
</style>
What I want is, the content div's height will be equal to the full height of the window except the header & footer part. Currently I'm just seeing a small yellow strip for the content part, as the text within it very minimal, the rest of the page is white. I want, the content div will occupy that place. I tried to use height : 100%; in the content div, but it didn't work. please help.
Try to modify your content class like:-
.content{
background: yellow;
position: fixed;
width: 100%;
top: 30px;
bottom: 30px;
}
The top and bottom is 30px as the height of header and footer is 30px. it'll work for you.
Try making a div class="wrapper" that surrounds your div class="content"... In the css give the .wrapper 100% width and height. I hope that helps.
I have something like this jsfiddle
<div id="foo">
<div>
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
</div>
#foo {
position: absolute;
min-height: 300px;
width: 400px;
}
#foo > div {
position:relative;
}
.header, .footer {
min-height: 30px;
}
How can I make '#foo > div' take up the 300px of height set on #foo? I want to pin '.footer' to the bottom of '#foo > div' as well. '.main' should fill the remainder of the space even if it's empty and become scrollable when it's content warrants it.
I've struggled with this for a few hours so now time to ask the gurus. Any help with fiddles would be greatly appreciated. Thanks!
You might be looking for something like this:
http://jsfiddle.net/audetwebdesign/V2gdj/4/
Using the following CSS;
div {
border: 1px solid gray;
}
#foo {
position: absolute;
height: 300px;
width: 400px;
}
#foo > div {
position: relative;
height: inherit;
}
.header, .footer {
height: 30px;
}
.main {
position: absolute;
top: 30px;
bottom: 30px;
left: 0;
right: 0;
outline: 1px solid blue;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Explanation pending on your comments.
Your CSS is referencing ID's, but your divs have classes, not ID's. Plus, you have a typo in class="fotter"
Firstly, you have a few errors to tidy up. In your HTML you call it fotter, but in the CSS it is footer. Secondly, in the HTML you have you divs with classes assigned, but in the CSS you are selecting IDs. Change one to the other and you're on the right track.
To make the footer stick to the bottom you could try this in your CSS:
.main {min-height: 240px;}
Here's a fiddle to see if it's what you're looking for: http://jsfiddle.net/Jzq2Q/
Best of luck.
SO,
I've created a four-column fluid-width layout for a site, and I'm working on placing a fluid square DIV within one of my columns. There are a few techniques I've found to achieve this - namely, setting padding-bottom to the same percentage as the width - but none of these seem to work when the DIV contains content.
Is there a way to maintain a 1:1 (square) ratio on a fluid DIV when that DIV contains content?
Here's my HTML:
<div id="leftmostcolumn">
<div id="logo"></div>
</div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="rightmostcolumn"></div>
And my CSS:
body {
width: 100%;
height: 100%;
background-color: red;
}
#leftmostcolumn {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
background-color: blue;
}
#leftcolumn {
position: absolute;
top: 0;
left: 25%;
width: 25%;
height: 100%;
background-color: green;
}
#rightcolumn {
position: absolute;
top: 0;
left: 50%;
width: 25%;
height: 100%;
background-color: yellow;
}
#rightmostcolumn {
position: absolute;
top: 0;
left: 75%;
width: 25%;
height: 100%;
background-color: gray;
}
#logo {
width:100%;
padding-bottom:100%;
background-color: #aa2d2d;
color: white;
}
And here's a JsFiddle.
The DIV "logo" is the one I'm trying to maintain as a square. Right now, I've used the padding-bottom approach but that doesn't do the trick when there's content in the DIV. Any input is greatly appreciated!
Marca
EDIT:
Getting there...I'm adapting a script I found to find the width of the DIV and then apply that value to the height to keep it a square. However, as it stands now the script doesn't constantly resize the DIV, and it won't allow it to shrink below a certain size. Any thoughts on how to correct either of these issues?
HTML:
<div id="box"></div>
CSS:
#box { width: 75%; height: 50px; background-color: black; }
JQUERY:
$("#box").css("height", function() {
return $(this).width();
});
JsFiddle is here.
This is something I've actually been messing around with for a while, and have come up with a quasi (but not entirely) hacky, CSS-only solution that seems to work on most browsers in the past decade. The trick is to use images, and positioning in a tricky fashion. Consider the following (simplification) of your code.
Markup:
<div class="sqr_box">
your content goes here!
</div>
CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
border: solid 2px pink;
background-color: grey;
color: white;
}
Now, we can't set the height in terms of percent, so we won't; instead, first we'll go into Photoshop, and make an image that is 2x2 px, transparent, or background-colored. Next we'll add the following to your markup:
<div class="sqr_box">
<img src="images/sizers/2x2.png" class="sizer">
<div class="content">your content goes here!</div>
</div>
and THIS to your CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
position: relative; /* static positioning is less than ideal for this scenario */
}
.sqr_box > img.sizer
{
display: block; /* images default to an inline-block like thing */
width: 100%;
height: auto; /* CLUTCH!!! this ensures that the image's height changes to maintain proportions with it's width */
visibility: hidden;
}
.sqr_box > .content
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Our parent element now has a dynamically assigned height, this will work */
border: solid 2px pink;
background-color: grey;
color: white;
}
Best of all, this will work for any sized ratio of box you'd want! Just change the proportions of the image!
Hope this is all still relevant to you, 3 months later.
-Sandy
Put all four columns in one div. set that div to 100% width and set the font size to 100em
Have each of your four columns have a width of 25em instead of 25%
Have your logo width and height set to 25em each