I need a cross browser solution using css without JS or jQuery.
So i have two divs:
<div class="block1">
<div class="block2">
content
</div>
</div>
I need block2 to be full width of block1. I need spacing in every side 15px for block2. It must be responsive layout width and height. block1 must be 100% page width and height.
What i see. Something wrong with block2 margins. I didn't get 15px spacing all side in block2. I have problem with bottom side for now.
block1 = background: red;
block2 = background: black;
First i think that it is an easy task, but for now i didn't find solution.
What i have tried:
Html
<body class="body">
<div class="block1">
<div class="block2">
content
</div>
</div>
</body>
CSS
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.block1 {
width: 100%;
background:red;
height: 100%;
display: block;
overflow: hidden;
}
.block2 {
background: #000000;
min-height: 100%;
margin: 15px 15px 15px 15px;
color: #ffffff;
}
here are 2 examples for you:
1. if you dont mind it not supporting IE 8 and below, you can use css CALC() to calculate the min-height of the inner block: min-height: calc(100% - 30px); (30 being the top+bottom margins)
html, body {
left:0;
top:0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.block1 {
width: 100%;
background:red;
height: 100%;
display: block;
overflow: hidden;
}
.block2 {
background: #000000;
min-height: calc(100% - 30px);
margin: 15px 15px 15px 15px;
color: #ffffff;
}
<div class="block1">
<div class="block2">content</div>
</div>
2. a solution that should be supported in IE 8, is this:
html, body {
left:0;
top:0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.block1 {
width: 100%;
background:red;
height: 100%;
display: block;
overflow: hidden;
}
.block2 {
background: #000000;
margin: 15px 15px 15px 15px;
display:block;
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
color: #ffffff;
}
<div class="block1">
<div class="block2">content</div>
</div>
Related
I'm desiging my page as:
Fixed top and side menus, main page scrollable depending on contents, everything inside a container.
I can't figure out how to stop the container from leaking the background in the bottom. I have tryed min-height: 100%, height: calc(100vh-50px), but none of this will work.
What I have so far
You can see the background leak in https://jsfiddle.net/0afeh6cb/
How can I get rid of that?
html,
body {
margin: 0px;
padding: 0px;
background-color: green;
}
#container {
background-color: #fff;
position: relative;
width: 1000px;
min-height: calc(100vh - 50px);
margin: 0px auto 0px auto;
}
#topMenu {
position: fixed;
top: 0px;
margin: 0px;
padding: 5px 10px 5px 10px;
background-color: #e0e0e0;
width: 980px;
height: 40px;
}
#sideMenu {
position: fixed;
top: 50px;
margin: 0px;
padding: 5px;
background-color: #c0c0c0;
width: 180px;
height: 100%;
}
/* ------------- Container ------------- */
#main {
margin-top: 50px;
margin-left: 190px;
width: 790px;
padding: 10px;
background-color: #f0ffff;
}
#footer {
margin-left: 190px;
width: 790px;
}
<div id="container">
<div id="topMenu">
<p>Top Menu</p>
</div>
<div id="sideMenu">
<h3>Side menu</h3>
</div>
<div id="main">
<h1>My content here</h1>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
I hope this will help:
body,
#container {
height: 100vh;
}
#container {
/*height: calc(100vh - 50px);*/ You can remove this line
}
Remove the fixed positioning from your #topMenu.
#topMenu {
// position: fixed; <-- removed
// top: 0px; <-- removed
margin: 0px;
padding: 5px 10px 5px 10px;
background-color: #e0e0e0;
width: 980px;
height: 40px;
}
Remove the positioning from your #container and your calculated height and set a height of 100vh to prevent background bleeding entirely.
#container {
height: 100vh; // <-- added
background-color: #fff;
// position: relative; <-- removed
width: 1000px;
// min-height: calc(100vh - 50px); <-- removed
margin: 0px auto 0px auto;
}
Remove the margin top from your #main container.
#main {
// margin-top: 50px; <-- removed
margin-left: 190px;
width: 790px;
padding: 10px;
background-color: #f0ffff;
}
Please change the container class css as below:
100vh always take the total height of its parent div.
#container {
background-color: #fff;
position: relative;
width: 1000px;
_min-height: calc(100vh - 50px);//remove this line
height: 100vh; //Set this height.
margin: 0px auto 0px auto;
}
How can I have div.fixed at 100% of the width of its parent .content? ... knowing that all widths will be variable, even .content
more or less what I need is .content with position: relative; div.fixed with the position: absolute; and width: 100%; But fixed at the top if I have a vertical scroll
and if possible without using JavaScript, only with CSS.
I was trying several things but none works, thank you for your time and help
.sidebar {
float: left;
background-color: red;
padding: 20px;
color: #fff;
}
.content {
float: left;
width: 40%;
padding: 20px;
background-color: #d5d2ca;
min-height: 900px;
box-sizing: border-box;
position: relative;
}
.fixed {
background-color: #aaffaa;
padding: 20px;
position: absolute;
box-sizing: border-box;
width: calc(100% - 40px);
}
.content p {
margin-top: 100px;
}
<div style="width: 90%; margin: 0 auto;">
<div class="sidebar">
the sidebar is going to have variable width
</div>
<div class="content">
<div class="fixed">
Fixed
</div>
<p>content</p>
</div>
</div>
100% of .content? That would be
width:calc(40% - 40px);
change that line:
<div style="width: 90%; margin: 0 auto;">
to
<div style="width: 100%; margin: 0 auto;">
also add to the class:
.fixed {
width: 100%;
}
and remove width:40%; from the .content
I am not sure if i understand the problem correctly, but if you want to make the fixed div to have 100% of its parent, then the following should work
.content {
position: relative;
}
.fixed {
width: 100%;
position: absolute;
}
For your question to be solved, must width of .content equal with width of .fixed so, use of:
.fixed {
width: inherit;
//so .fixed get width 40%
}
But,
.fixed have position:fixed, so 40% is relative to the screen's viewport,
and
.content is 40% relative to his parent[div with width:90%,(90% relative to body)].
in here ,we have to do something to measure both elements relative to one element.so,do this:
html,body {
width: 100%;
margin:0;
}
<div style="width:100%; margin:5px 70px;">
of 90% to 100%----^ ^---^-------optional
also, use margin-left:-20px for remove affect padding:20px in .content.
.fixed {
margin-left: -20px;
//more code...
}
Nowو you have both elements have width:40% relative to same element.
Note, Get Full Page to better see result.
* {
box-sizing: border-box;
}
html,body {
width: 100%;
margin:0;
}
.sidebar {
float: left;
background-color: red;
padding: 20px;
color: #fff;
}
.content {
float: left;
width: 40%;
padding: 20px;
background-color: #d5d2ca;
min-height: 900px;
position: relative;
}
.fixed {
background-color: #aaffaa;
padding: 20px;
margin-left: -20px;
position: fixed;
width: inherit;
}
.content p {
margin-top: 100px;
}
<div style="width:100%; margin:5px 70px;">
<div class="sidebar">
the sidebar is going to have variable width
</div>
<div class="content">
<div class="fixed">
Fixed
</div>
<p>content</p>
</div>
</div>
There is a block with header, body and footer parts inside of it. Header and footer heights are fixed, body height is determined by its content. I need the outer block size to be the size of its contents but not more then the size of its container. If the body height exceeds maximum possible size, then the y-scroll is shown for body, but header and footer stay at the top and bottom of outer block.
I made the FIDDLE. But I could only get as far as when I resize window the scroll appears for outer block, not for body block only.
This is CSS and HTML:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
}
.innerContainer {
border: 1px solid purple;
max-height: 100%;
overflow: auto;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
background: green;
}
<div class='container'>
<div class='innerContainer'>
<div class='header'></div>
<div class='body'>text<br>text<br>...</div>
<div class='footer'></div>
</div>
</div>
Is it possible to do what I need without using JavaScript?
EDIT: I made an image to make it clear what I need.
Well Here is your code from what I understand that you want the header
sticks to top and footer in the bottom and you can scroll the body if
necessary in the container size.
<div class='container'>
<div class='innerContainer'>
<div class='header'></div>
<div class='body'>text<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>text
</div>
<div class='footer'></div>
</div>
</div>
We need to style the footer and header separately plus your style as you will see in the code below
So you add to .innerContainer (position: absolute; bottom: 0; right: 0; left: 0; height: 100%; overflow: hidden;) and for the .body you add(height: 50%; overflow-y: auto;)
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
}
.innerContainer {
border: 1px solid purple;
height: 100%;
max-height: 100%;
overflow: hidden;
bottom: 0;
top: 0;
right: 0;
left: 0;
position: absolute;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
background: green;
min-height: 20px;
max-height: 36%;
overflow-y: auto;
font-size: 20px;
}
I hope that what you want and if you have any question please let me know.
The only solution I've found is using CSS3 calc. Doesn't work in Android browswer, though... FIDDLE
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
overflow: hidden;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
height: 300px;
background: green;
}
.bodyContainer {
max-height: calc(100% - 60px);
overflow-y: auto;
}
<div class='container'>
<div class='header'></div>
<div class='bodyContainer'>
<div class='body'></div>
</div>
<div class='footer'></div>
</div>
Please note
the vertical scrollbars should show up when needed
left columns fits to width
right column takes the rest of the space
Here is one approach that uses CSS only.
The HTML looks like:
<div id="pageWrapper">
<header>Header</header>
<div id="contentWrapper">
<div class="table-wrap">
<div class="cell col1">
<div class="content">Column 1: Shrink-to-Fit Width</div>
</div>
<div class="cell col2">
<div class="content">Column 2: Variable Width</div>
</div>
</div>
</div>
<div id="footerWrapper">Footer</div>
</div>
and the CSS:
html, body {
height: 100%;
margin: 0;
}
body {
background-color: #E3E3E3;
}
#pageWrapper {
margin: 0 auto;
position: relative;
width: 90%; /*set to 100% or smaller or fixed width... */
height: 100%;
}
header {
display:block;
width: 100%;
height: 100px;
background: yellow;
}
#contentWrapper {
width: 100%;
position: absolute;
top: 100px;
bottom: 100px;
left: 0;
background: beige;
}
#footerWrapper {
width: 100%;
position: absolute;
height: 100px;
bottom: 0px;
left: 0;
background: gray;
}
.table-wrap {
width: 100%;
height: 100%;
}
.table-wrap .cell {
height: 100%;
}
.table-wrap .col1 {
float: left;
border: 1px dotted blue;
max-width: 80%; /* This is critical or else Column 2 can disappear */
}
.table-wrap .col1 .content {
height: inherit;
display: inline-block;
overflow-y: auto;
}
.table-wrap .col2 {
}
.table-wrap .col2 .content {
height: inherit;
overflow-y: auto;
}
See demo at: http://jsfiddle.net/audetwebdesign/kbAwf/
How This Works
Use absolute positioning to place the header, main content area and footer within the view port area.
Within the content area (#contentWrapper), the .table-wrap container has two cells, one which is floated left (column 1). This allows column 2 to fill the rest of the width.
To get the shrink-to-fit width for column 1, set display: inline-block to the inner .content container.
Finally, use overflow-y: auto for the scroll bars. (You can also use the scroll value.)
You need to set a maximum width to .col1 so that .col2 does not get pushed out of the view port. I set it to 80% but you can adjust it.
Also, note that an inline-block will expand as much as possible to flow its content, which is why you need to constrain it.
You man want to set a minimum width on #pageWrapper to prevent the layout from shrinking to something that is less than useful.
Like this
DEMO1
DEMO1 CSS
html, body {
height:100%;
}
header{
width: 100%;
background: yellow;
position: fixed;
top: 0;
height: 60px !important;
opacity:.8;
}
.content {
position:relative;
height: 100%;
/*width:600px; Sizing - any length */
padding:60px 0 30px 0; /* Header height and footer height */
margin:0 auto 0 auto; /* Center content */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1, .sidebar2 {
background: red;
top:60px;
bottom:30px;
width: 70%;
position:absolute;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
overflow-y:scroll;
}
.sidebar1 {
left:0;
width:30%;
}
.sidebar2 {
right: 0;
}
#scrollable2 {
background:green;
height: 100%;
min-width: 300px;
margin-left: 100px;
margin-right: 100px;
overflow:auto;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
footer {
width: 100%;
background: yellow;
position: fixed;
bottom: 0;
height: 30px;
}
DEMO2
HTML
<div class="main">
<div class="header"></div>
<div class="mid">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
CSS
body, html {
width: 100%;
height: 100%;
background-color: black;
padding: 0;
margin: 0;
}
.main {
background-color: white;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
}
.main, .header, .left, .right, .mid, .footer {
position: absolute;
}
.header {
height: 100px;
top: 0px;
left: 0px;
right: 0px;
border-bottom: 4px solid black;
}
.mid {
top: 104px;
left: 0px;
right: 0px;
bottom: 14px;
}
.left {
overflow-y:auto;
width: 100px;
top: 0px;
bottom: 0px;
}
.right {
overflow-y:auto;
top: 0px;
bottom: 0px;
left: 100px;
right: 0px;
border-left: 4px solid black;
}
.footer {
left: 0px;
right: 0px;
bottom: 0px;
height: 10px;
border-top: 4px solid black;
}
Working Fiddle (as shown in your post)
I´m trying to make a footer that sticks to the bottom of wrapper, but leaving a bottom margin so that the pattern image on the body background can be seen.
I came accross the sticky footer at
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
which worked great, but all my attempts of adding margin/paddings to footer/ wrapper/ body didn´t.
I guess it must be a pretty simple thing, but I´m not finding it. Thanks for any hints/ suggestions!
Here´s the relevant CSS:
*
{
margin: 0;
}
html, body
{
margin-top: 0px;
margin-bottom: 25px;
background-repeat: repeat;
background-image: url(images/modulo-pattern-grey-light.gif);
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -98px;
background: #fff url(images/footer.gif) left bottom no-repeat;
width: 980px;
box-shadow: 4px 4px 5px #999;
}
.footer, .push
{
height: 98px;
}
.footer
{
margin-left: 490px;
margin-right: 40px;
background-color: #bc4c9b;
}
HTML:
<div id="wraper">
<div class="header"></div>
<div class="logo">
</div>
<div class="menu_container">
<div class="main_menu">
<ul>
<li>Home</li>
<li><a class="selected" >Quiénes Somos</a></li>
<li>Consultoría</li>
<li>Capacitación</li>
<li>Académico / Artículos</li>
<li>Alianzas</li>
<li>Proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div class="quienes_pic"></div>
<div class="quienes_text"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
Sorry I didn´t mention, but Fixed position won´t work, since I want the same footer to work on different pages with differents heighs. The idea was to have the same wraper and footer through all the pages, and then assigning different body ids to set the different heighs
Pretty much like is done through this site:
http://www.casadelviento.com.ar/
In this case, it´s using different body ids AND different wrappers, I thought may be it could be done with less code and more clear (i.e I don´t understand why is the difference between the wraper heigh #contenido-index and the body heigh)
#contenido-index {
background-color: #FFF;
height: 2040px;
width: 900px;
margin: 0 auto;
}
#contenido-chicos {
background-color: #FFF;
height: 2760px;
width: 900px;
margin: 0 auto;
}
#contenido-adultos {
background-color: #FFF;
height: 2810px;
width: 900px;
margin: 0 auto;
}
#contenido-somos {
background-color: #FFF;
height: 2150px;
width: 900px;
margin: 0 auto;
}
#contenido-historia {
background-color: #FFF;
height: 980px;
width: 900px;
margin: 0 auto;
}
#contenido-horarios {
background-color: #FFF;
height: 967px;
width: 900px;
margin: 0 auto;
}
#contenido-contacto {
background-color: #FFF;
height: 750px;
width: 900px;
margin: 0 auto;
}
#contenido-videos {
background-color: #FFF;
height: 820px;
width: 900px;
margin: 0 auto;
}
#contenido-fotos {
background-color: #FFF;
height: 595px;
width: 900px;
margin: 0 auto;
}
#body-index {
height: 2160px;
}
#body-somos {
height: 2070px;
}
#body-historia {
height: 1150px;
}
#body-horarios {
height: 1060px;
}
#body-chicos {
height: 2700px;
}
#body-adultos {
height: 2800px;
}
#body-videos {
height: 960px;
}
#body-fotos {
height: 740px;
}
#body-contacto {
height: 880px;
}
/*FOOTER}*/
#contenedor_pie {
height: 40px;
width: 500px;
float: left;
margin-left: 20px;
margin-top: 15px;
}
With Reference to http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml
You can define your footer HTML as
<div id="Sticky">
<h2>Here is a Sticky Footer</h2>
<p>Test for Sticky Footer</p>
</div>
then your CSS would be like
#Sticky
{
color:#FFF;
text-shadow: 2px 2px 2px #333;
border: 2px solid orange;
position:fixed;
padding: 0 10px 0 10px;
left: 0px;
bottom: 0px;
width: 100%;
}
Hey you can do easily just define in your css some code as like this
Css
body{background:green;}
#wrapper {
background:red;
min-height:700px;
}
.footer {
position:fixed;
bottom:20px;
height:100px;
background:yellow;
left:0;
right:0;
}
HTML
<div id="wrapper">Wraper text </div>
<div class="footer">Sticky footer</div>
Live demo http://jsfiddle.net/6z6Uk/
and now adjust according to your design .