Here is the situation, I have this html:
<div id='main'>
<div id='menu'>
Menu Items Here
</div>
<div id='cont'>
Content Here
<div id='footer'>Some Footer</div>
</div>
</div>
CSS here:
html, body {
height: 100%;
width : 100%;
margin: 0;
padding: 0;
}
#main{
overflow : auto;
background-color: yellow;
width : 100%;
min-height : 100%;
}
#menu {
background-color: red;
float : left;
width : 300px;
}
#cont {
margin-left : 300px;
float : right;
background-color: orange;
width : 100px;
min-height : 100%;
height: auto !important; /*min-height hack*/
height: 100%; /*min-height hack*/
}
What I want to do basically is #cont div must have a min height of 100% (if I have small content) but will extend if have longer content.
Any help would be appreciated.
Note: The width size is just temporary for now.
Thanks!
This may work:
#main{
height : 100%;
}
#cont {
min-height : 100%;
/* Without the hacks */
}
Try this http://jsfiddle.net/W6tvW/2/
<div id='main'>
<div id='menu'>
Menu Items Here
</div>
<div id='cont'>
Content Here
<div id='footer'>Some Footer</div>
</div>
</div>
html, body {
height: 100%;
width : 100%;
margin: 0;
padding: 0;
}
#main{
overflow : auto;
background-color: yellow;
min-height : 100%;
position: relative;
}
#menu {
background-color: red;
float : left;
width : 300px;
}
#cont {
margin-left : 300px;
background-color: orange;
min-height : 100%;
position: absolute;
right: 0;
}
If you want the footer to stay at the bottom:
#footer {
position: absolute;
bottom: 0;
}
you are using min-height:100% which means 'make the minimum height of this box be the height of it'
you would be better using a pixel value (e.g., make #menu and #cont min-height:400px;)
if you want to make them both the height of the tallest one, then you'll need some jquery:
if (jQuery('#menu').height() < jQuery('#cont').height()) {
// the cont is bigger than the menu
jQuery('#menu').css("height", jQuery('#cont').height());
}
Related
This question already has answers here:
Two divs, one fixed width, the other, the rest
(10 answers)
Closed 4 years ago.
So I am making a website that uses this setup. A nav, a panel, and a main content area. The content area is filled with divs that will be resized by media queries. The issue is I want the panel to be a fixed width, and the main area to take up the rest of the screen on all screen sizes and automatically downsize. Example. If the panel's 255px width is 25% of the screen, I want the width of main to be the next 75% of the screen. It either takes up too much space and makes it scroll horizontally, or goes down to the new line. What would be the best solution
.panel {
width: 255px;
height: 100%;
position: relative;
float: left;
background-color: orange;
}
.main {
width: 88%;
height: 100%;
position: relative;
float: left;
background-color: red;
}
.nav {
width: 100%;
height: 300px;
background-color: yellow;
}
<div class="panel">
T
</div>
<div class="main">
<div class="nav">
T
</div>
T
</div>
LINK- https://jsfiddle.net/cn6q6keu/2/
You can do it with float and flex.
Here is a float solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
.clear-fix:before, .clear-fix:after{
display: block;
content: '';
clear: both;
}
#main{
height: 100%;
}
.panel, .nav{
float: left;
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
width: calc(100% - 225px);
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/3rxdub8d/5/
Here is a flex solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
#main{
display: flex;
height: 100%;
}
.panel, .nav{
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
flex: 1;
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/xxwsa4oh/2/
I'm afraid you're gonna have to apply this rule to the fixed width, so you'll be able to convert it to a relative unit like %:
(target รท context) * 100 = result
Target = panel fixed width;
Context = parent element width;
Result = Converted fixed width value in percentage.
I will try to create a slider(move to left or right), but when I set outer Container(.wrapper) width over 100vw and set the height to 100vh with every child div, It will overflow on vertical, how can I avoid it?
Open the detailed description of the picture
body{
padding : 0;
margin:0;
}
.wrapper {
width : 200vw;
}
.section {
width : 100vw;
height : 100vh;
position:relative;
float:left;
}
.section1 {
background-color : red;
}
.section2{
background-color : yellow;
}
<div class="wrapper">
<div class="section section1">1</div>
<div class="section section2">2</div>
</div>
if you want to edit with online editor, you can try it
and I don't know why if When I only have one child div(.section), the height doesn't vertical overflow(move up and down)
body{
padding : 0;
margin:0;
}
.wrapper {
width : 100vw;
}
.section {
width : 100vw;
height : 100vh;
position:relative;
float:left;
}
.section1 {
background-color : red;
}
/*
.section2 {
background-color : yellow;
}
*/
<div class="wrapper">
<div class="section section1">1</div>
<!--<div class="section section1">1</div>-->
</div>
Although your question says you're looking to hide the horizontal scrollbar (left and right), your image indicates that you're actually looking to hide the vertical scrollbar (up and down).
You're looking to add overflow-y: hidden to body in order to hide the vertical scrollbar:
body {
padding: 0;
margin: 0;
overflow-y: hidden;
}
.wrapper {
width: 200vw;
}
.section {
width: 100vw;
height: 100vh;
position: relative;
float: left;
}
.section1 {
background-color: red;
}
.section2 {
background-color: yellow;
}
<div class="wrapper">
<div class="section section1">1</div>
<div class="section section2">2</div>
</div>
Alternatively, if you are indeed looking to hide the horizontal scrollbar, this can be done with overflow-x: hidden, though note that your content won't actually be too tall to escape the bounds vertically with the horizontal scrollbar removed. Setting a height of 110vh demonstrates this working:
body {
padding: 0;
margin: 0;
overflow-x: hidden;
}
.wrapper {
width: 200vw;
}
.section {
width: 100vw;
height: 110vh;
position: relative;
float: left;
}
.section1 {
background-color: red;
}
.section2 {
background-color: yellow;
}
<div class="wrapper">
<div class="section section1">1</div>
<div class="section section2">2</div>
</div>
Hope this helps! :)
I have two divs. outer div taking 25%. And the inner div is placed at the bottom (position: fixed; bottom: 0; width: 25%; border-top: 1px solid red) But this is not taking 25%.
I am adding border for this div. So there is an white space is showing because of the width.
HTML:
<div id="main-div">
<div id="outer-div">
<div id="div-1"></div>
<div id="div-2">
<div id="inner-div"></div>
</div>
</div>
</div>
CSS:
#main-div{
height: 100%;
width: 100%;
display: table;
}
#outer-div {
width: 100%;
}
#div-1, #div-2 {
width: 100%;
}
#inner-div {
position: fixed;
bottom: 0; width: 25%;
border-top: 1px solid red;
}
How to apply exactly apply 25% width to inner-div which has position fixed ?
UPDATE Added js fiddle in comment
Remove your body margin . This issue because of you don't remove your body margin you can simply fix this
body {
margin:0;
}
body {
margin:0;
}
#main-div{
height: 100%;
width: 100%;
display: table;
}
#outer-div {
width: 100%;
}
#div-1, #div-2 {
width: 100%;
}
#inner-div {
position: fixed;
bottom: 0; width: 25%;
border-top: 1px solid red;
}
<body>
<div id="main-div">
<div id="outer-div">
<div id="div-1"></div>
<div id="div-2">
<div id="inner-div"></div>
</div>
</div>
</div>
</body>
The real reason why inner-div has more width than outer-div is because inner-div has position: fixed applied to it.
Now when you apply position: fixed, it makes the element position relative to the viewport.
So, in this case inner-div is relative to the body which has some user-agent margin styles applied. To make them have same width apply margin: 0 to the body.
Also, apply box-sizing: border-box to outer-div to exclude the border in the width.
I have updated the fiddle for you. So both divs have the same width.
https://jsfiddle.net/nashcheez/uur2h5w3/4/
Fixed position is relative to the browser window hence percentage values will be relative to the <html> element (http://www.w3schools.com/cssref/pr_class_position.asp). Although experimental position:sticky might accomplish what you need since it is relative to the viewport (parent relative element).
You can use below css for this
#inner-div {
box-sizing: border-box;
}
You can check updated fiddle
You need to reset body for browser. For this reason "inner-div" is taking space.
body{margin:0;padding:0;}
body{margin:0;padding:0;}
#main-div{
height: 100%;
width: 100%;
display: table;
background: blue none repeat scroll 0 0;
border: 1px solid blue;
}
#outer-div {
width: 25%;
border: 1px solid green;
}
#div-1 {
width: 100%;
}
#div-2 {
display: table;
height: 0;
padding-right: 2px;
width: 100%;
}
#inner-div {
text-align: center;
position: fixed;
bottom: 0;
width: 25%;
border-top: 1px solid red;
padding-bottom: 27px;
padding-top: 10px;
}
<div id="main-div">
<div id="outer-div"> //list
<div id="div-1"> //parent-scrol
<div id="div-2"> //scroll
<div id="div-3"> //inner-list
<div id="inner-div">wefffef</div> //create-new
</div>
</div>
</div>
</div>
</div>
I have simple layout and I'm trying to expand div's height to given % so I can put later scalled background img using backgound-size.
In example I wanna have div1 expand to 69%.
Why it doesn't work and how to fix it?
Link: https://jsfiddle.net/mc6ecstr/
CSS:
body
{
color: white;
margin: 0px;
padding: 0px;
height: 1080px;
}
#container
{
width: 100%;
height: 100%;
}
#header
{
background-color: blue;
width: 100%;
}
#div1 {
background-color: red;
float: left;
width: 15.67%;
margin-left: 1.5%;
height: 69%; /*doesnt work*/
}
#div2 {
background-color: green;
float: right;
width: 43.17%;
margin-right: 3.6%;
}
HTML:
<body>
<div id="header">Header</div>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
</body>
You need to give to the body and html and to his parent (#container) height: 100%;
CSS
body, html
{
color: white;
margin: 0px;
padding: 0px;
height: 100%; /* Add this */
}
#container
{
width: 100%;
height: 100%; /* Add this */
}
DEMO HERE
If you know the height of #header you can use calc(...) and absolute positioning to make the container fill the remaining space:
#container
{
width: 100%;
height: 100%;
position:absolute;
top:20px;
left:0px;
height:calc(100% - 20px);
}
In this example I've set the header to a fixed height of 20px, then offset container by the same amount.
Then set #div1's height accordingly to fill 69% of #container.
Fiddle: https://jsfiddle.net/GarryPas/mc6ecstr/2/
I have following html, which needs to remain as it is:
<body>
<div id="wrapper">
<div id="content">some text</div>
</div>
</body>
Now I need to make the content div to fill the page in 100%. I tried following CSS with no luck:
body {
height: 100%;
}
#wrapper {
position: relative;
}
#content {
position: absolute;
background: red;
height: 100%;
}
See here: http://www.cssdesk.com/hHZyD
Check this fiddle
I've edited the CSS as
CSS
html,body {
height: 100%;
}
#wrapper {
position: relative;
height: 100%;
}
#content {
position: absolute;
background: red;
height: 100%;
}
First of all, for height in percentage to work, height for html and `body should be set to 100%
ie
html,body {
height: 100%;
}
Next for the percentage to work, the parent div should be given a height.So i've changed
the css to
#wrapper {
position: relative;
height: 100%;
}
UPDATE
As #ctwheels specified in his comment, if the OP needs both height and width to be 100%,
Check the fiddle
Here i have set width to 100% for both the divs.
Demo
css
body, html {
height: 100%;
margin:0;
}
#wrapper {
position: relative;
height: 100%;
}
#content {
position: absolute;
background: red;
width: 100%;
height: 100%;
}