I have problems placing a div within another div which has a defined height of lets say 400px.
When i set the inner div to 100% then its overlapping the outer div and goes over the outer one. Why isnt 100% height sizing the inner div to the outer divs height?
body {
min-width:300px;
}
.header {
background-color:pink;
width:100%;
height:400px;
}
.menu {
background-color: red;
}
.header-container {
color:white;
background-color:gray;
height:100%;
max-width:400px;
margin:auto;
}
.headline {
padding-right:36px;
padding-left:36px;
padding-top:54px;
padding-bottom:54px;
}
.clearfix {
clear:both;
}
<div class="header">
<div class="menu">
menu
</div>
<div class="header-container clearfix">
<div class="headline">
<span>das ist mein blog</span>
<span>this is the underline</span>
</div>
</div>
</div>
<div class="blog">
y
</div>
<div class="footer">
x
</div>
https://jsfiddle.net/g9ec4nw8/
Because the the padding on the .header-container is causing an overflow.
Adding box-sizing: border-box; to your .header-container, will fix the box-sizing issue.
But not only that, you haven't taken into account the 18px of height by your .menu.
In full, by changing your .header-container to the following code:
.header-container {
color:white;
background-color:gray;
height:calc(100% - 18px);
max-width:400px;
box-sizing: border-box;
margin:auto;
top:0;
bottom:0;
padding-right:36px;
padding-left:36px;
padding-top:54px;
padding-bottom:54px;
}
Will fix the issue.
Fiddle Here.
Related
I have 3 divs within a container with each of their widths set at 100%. if I float them all left they will stack on top of each other. What I would like for them to do is float next to each other horizontally. Changing the width of the div to a fixed width works fine. How can I achieve this? Thank you for your help and time.
html
<div id="scroller">
<div id="slide-container">
<div class="slide" style="background-color:yellow;">
</div>
<div class="slide" style="background-color:orange;">
</div>
<div class="slide" style="background-color:red;">
</div>
</div>
</div>
css
body, html {
margin:0;
padding:0;
}
#scroller {
min-width:100%;
height:400px;
background-color:blue;
position:relative;
overflow:hidden;
}
#slide-container {
height:100%;
position:relative;
left:0;
white-space:nowrap;
font-size:0;
}
.slide {
height:100%;
width:100%;
margin:0;
padding:0;
float:left;
}
https://codepen.io/justinhdevelopment/pen/bGexaJy codepen example of problem
Here is some use of flex and overflow-x to make your desired effect. You can further make changes as per your need-
body, html {
margin:0;
padding:0;
overflow: none;
}
#slide-container {
height:400px;
width: 100%;
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
}
.slide {
height:400px;
min-width:100%;
}
#scroller {
min-width:100%;
height:400px;
background-color:blue;
position:relative;
overflow:hidden;
}
<div id="scroller">
<div id="slide-container">
<div class="slide" style="background-color:yellow;">
</div>
<div class="slide" style="background-color:orange;">
</div>
<div class="slide" style="background-color:red;">
</div>
</div>
</div>
If I am understanding what you are looking for correctly what you are looking for is using a flex display in your parent div:
#slide-container {
height:100%;
position:relative;
left:0;
white-space:nowrap;
font-size:0;
display: flex;
}
Take a look at this for further reference:
https://www.w3schools.com/css/css3_flexbox.asp
I have a div with a big list, I only want to see (with a scroll) the number of elements that fits in the screen. So I cannot figure how can I adjust the height of the div to the bottom border of screen.
Do I have to use JS?
Based on screen size apply media query styles.
for example Footer want to be bottom we use this for all the browsers
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0; /* Always make footer in bottom at any screen */
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
If you got a fixed size above. You can fill the rest by using css calc.
.test {
height:300px;
width: 100%
background-color:yellow;
}
.full-height {
height: calc(100vh - 300px);
background-color:red;
}
<div class="test"></div>
<div class="full-height">
</div>
A better solution is to use a wrapper. Like this:
.wrapper {
background-color:red;
height: 100vh;
}
.list {
background-color: white;
width: 100%
}
<div class="wrapper">
<div class="list">
<ul>
<li>This</li>
<li>is</li>
<li>a</li>
<li>list</li>
<ul>
</div>
</div>
I am having some trouble understanding why some of my DIVs are not expanding to my "content" DIV's height. It has to be css/html only.
VISUAL IMAGE (IMGUR)
HIERARCHY
-[+]wrapper
----[-]left (will contain navigation bar)
----[-]right (used just to center the "center" div, may have content)
----[-]center (center of page containing content)
--------[o]header (will only have small line of text)
--------[o]content (when height overflows, it should expand all other heights)
----[-]footer (resource & contact links, should always be at the bottom)
CSS
*{
font-family: Arial Black,Arial Bold,Gadget,sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 400;
border:0px;
margin:0px;
padding:0px;
}
.wrapper{
position:absolute;
width:100%;
height:100%;
background-color:black;
}
.left{
position:absolute;
left:0px;
width:220px;
height:100%;
background-color:red;
}
.right{
position:absolute;
right:0px;
width:220px;
height:100%;
background-color:blue;
}
.center{
position:absolute;
right:220px;
left:220px;
background-color:yellow;
}
#header{
float:left;
height:40px;
width:100%;
background-color:silver;
}
#footer{
position:absolute;
bottom:0px;
height:20px;
width:100%;
background-color:silver;
}
#content{
float:left;
top:40px;
bottom:20px;
margin:20px;
background-color:orange;
}
HTML
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
<div class="center">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
Here is my jfiddle: JFIDDLE
you set .wrapper div's position:absolute, and height 100%;,so it only take the height of container in which he is,(that's how absolutely positioned elements work)
the problem is i think you are over-using absolute positions a little bit,see its a powerful tool but not that good for layout compositions , you can use either the float base layout, or in-line blocks or flex layouts
flex will work like
.wrapper {
display: flex;
}
.left {
flex-grow: 1
}
.right {
flex-grow: 1
}
.content {
flex-grow: 3
}
but you have to put footer out of the wrapper or you can add an other child div like
<div class="wrapper">
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<div>
<div id="footer"></div>
</div>
now just add the flex property to main, and flex grow to childrens
remember flex work on rations , the above css means the .contnet dive will take 3 times the width of .lef or .right div
i.e 20% width for left, 20% width for right, 60% width for center,
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
<div class="row">
<div class="col">Lorem ipsum dolor</div>
<div class="col">Lorem ipsum dolor sit amet</div>
</div>
Refer this link you will get the solution for it or if you don't want to use css then go for Javascript. Refer this jquery plugin for that purpose - jquery-match-height
How can i have a fixed header with a vertical scroll-bar for my each column.
<div class="header"></div>
<div class="secondary-aside"></div>
<div class="container">
<div class="row">
<div class="col-sm-4">Title 1</div>
<div class="col-sm-4">Title 2</div>
<div class="col-sm-4">Title 3</div>
</div>
</div>
Below is my css...
html, body, .container {
height:100%;
width:100%; /*keep html and body 100% */
margin:0;
background:#e5e5e5;
}
.container {
display:table;
width: calc(100% - 260px);
border-spacing:1.5em;
}
.row {
display:table-row;
}
.col-sm-4 {
display:table-cell;
background:white;
}
.header{
background:#E5E5E5;
width:100%;
height:60px;
}
.secondary-aside{
width:260px;
background-color:#E1E1E1;
height:100%;
right:0px;
position:fixed;
}
Below is my codepen
http://codepen.io/anon/pen/lqfxt
The overflow property only applies to block and inline-block elements. In order to show the scroll bar, you'll need to change the display property from table-cell to one of the two aforementioned display properties, and then add an overflow property. You'll also need to set a specific width/height in this case.
In order to fix the header to the top, simply apply position: absolute; to the header element and give your columns a margin-top to equal the header height:
.col-sm-4 {
display: inline-block;
width: 150px;
height: 600px;
background:white;
overflow-y: visible;
margin-top: 60px;
}
.header{
background:#E5E5E5;
width:100%;
height:60px;
position: absolute;
}
Example CodePen
Here is my HTML:
<div id="container">
<div id="left-container">
</div>
<div id="right-container">
</div>
</div>
The container is 100% height (I checked it with Firebug). But the #left_container needs to be 100% too and it isn't!
Below is my CSS and a screenshot. The yellow should be 100%. Yellow is the background of the #left-container
html, body {
height: 100%;
}
#container {
position:relative;
margin: 0 auto;
width: 100%;
height:100%;
height: auto !important;
min-height:100%;
background: #fff;
}
#left-container {
width: 300px;
background: #ff0;
height:100%;
height: auto !important;
min-height:100%;
}
This article discusses both the issue and solution in detail:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
This might help too:
<style>
#outer {position:absolute; height:auto; width:200px; border: 1px solid red; }
#inner {position:absolute; height:100%; width:20px; border:1px solid black; }
</style>
<div id='outer'>
<div id='inner'>
</div>
text
</div>
See here for more details on the above:
How to make a floated div 100% height of its parent?
The best way to approach this problem is to think outside the box a little. There's no reason that both containers need to stretch to 100% if you're just concerned about the background stretching for both of them. There's a really simple technique called Faux Columns in which you combine the backgrounds for both sidebars into one single background image, and set the main container's background to that image. When a longer sidebar stretches the main container, it brings down the background for both sidebars.
<style>
#outer-container {
height:200vh;
width:100%;
position:relative;
background-color:orange;
}
#left-container{
position:absolute;
width:100%;
height:100%;
background-color:blue;
}
</style>
<body>
<div id="outer-container">
<div id="left-container">
</div>
</div>
</body>
You should be able to use just
margin:0;
padding:0;
height:100%;
For the conatainers to get what you want.