I have css code to do layout. i have basic header panel, footer, left panel, and center panel. I want to have left panel and center panel automatically stretch to bottom(blue and gray part all the way to black footer). is there any way to do that?
following are my codes.
thank you,
body {
text-align: center;
}
.wrapper {
position: relative;
width: 960px;
font-size: 0.9em;
margin: 0 auto -20px;
text-align: left;
}
.header {
height: 125px;
background-color:purple;
}
.footer {
position: relative;
width: 960px;
margin: 0 auto;
background-color:black;
}
.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 960px;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
text-align: center;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */
background-color:yellow;
}
.footer, .push {
height: 20px; /* .push must be the same height as .footer */
}
.leftPanel{
width:200px;
background-color:blue;
float:left;
height: 100%;
}
.centerPanel{
width:760px;
background-color:gray;
float:left;
height: 100%;
}
dl,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,div,p,blockquote,fieldset,legend,input,select,textarea
{ margin:0; padding:0 }
<div class="wrapper">
<div class="header">
<h1>header</h1>
</div>
<div class="leftPanel">
leftPanel
</div>
<div class="centerPanel">
center Panel
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
This is a very work-aroundish solution, but here it goes: http://jsfiddle.net/Us5Cn/
The only way to get elements to stretch to a percentage portion of the height of the view port is to anchor them to the bottom.
See here for specifics.
Related
My css is below. What I want is the header shall be fixed at top of the page and having width equal to the width of container irrespective to the changing width of browser. However, I always get the width of header expands over the width of Container. Please instruct me how to fix it?
html {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
width: 100%;
display: grid;
grid-template-columms: auto auto;
grid-template-rows: 170px 60px;
position: fixed;
top: 0px;
margin: 0 auto;
}
<div class="container">
<header>
<div class="cart">
</div>
</header>
Set the width of the header to 80%;
Works automatically..
* {
margin:0;
padding:0;
}
.container {
width: 80%;
margin: auto;
border: 1px solid red;
height: 150vh;
}
header {
background: green;
position: fixed;
width: 80%;
top: 0;
height: 50px;
}
<div class="container">
<header>
<div class="cart">
</div>
</header>
Codepen Demo
How can I tell a div to use the entire area marked with the red arrows no matter the size of the browser and no matter the div contents?
I tried: <div style='height:100%;width:'100%'>...</div> but it only takes the horizontal area, not the vertical. Is there a way to do this?
Check out this Fiddle
https://jsfiddle.net/o7u9hxou/
html
<body>
<div id="sidebar"></div>
<div id="wrapper">
<div id="topbar"></div>
<div id="else"></div>
</div>
</body>
css
body {
box-sizing: border-box;
height: 100vh;
margin: 0px;
padding: 0px;
}
#else {
background-color: green;
height: 90vh;
}
#sidebar {
background-color: pink;
display: inline-block;
float: left;
height: 100%;
min-width: 50px;
width: 10%;
}
#topbar {
background-color: yellow;
height: 10vh;
min-height: 20px;
}
#wrapper {
display: inline-block;
float: right;
height: 100%;
width: 90%;
}
I tried css stylesheet reset which didn't do anything, and other solutions but to no fix. Margins are set to 0 on container and there is still a margin on the right hand side. If i disable the margin left 0 the extra whitespace appears on the left side. Thanks in advance.
body {
padding-top: 50px;
}
.container {
overflow: hidden;
margin-left: 0 auto;
margin-right: 0 auto;
padding: 0 0 0 0;
}
#content {
overflow: auto;
background-color: #FFFFFF;
margin-left: 0;
margin-right: 0;
}
#content-left {
color: #FFFFFF;
float: left;
background-color: #666666;
width: 30%;
}
#content-right {
color: #FFFFFF;
float: right;
background-color: #333333;
width: 70%;
}
<body>
<div class="container" id="main">
<div id="content">
<div id="content-left">
<div>LEFT</div>
</div>
<div id="content-right">
<div>RIGHT</div>
</div>
</div>
</div>
</body>
Set the margin for all elements to 0px, this will remove the extra margin
* {
margin: 0px;
}
Also add width: 100% to your .container
Note: Add this as the first style in your CSS. This can be overridden by the styles specified below.
Below is an update to your code.
* {
margin: 0px;
}
body {
padding-top: 50px;
}
.container {
width: 100%;
overflow: hidden;
margin-left: 0 auto;
margin-right: 0 auto;
padding: 0 0 0 0;
}
#content {
overflow: auto;
background-color: #FFFFFF;
margin-left: 0;
margin-right: 0;
}
#content-left {
color: #FFFFFF;
float: left;
background-color: #666666;
width: 30%;
}
#content-right {
color: #FFFFFF;
float: right;
background-color: #333333;
width: 70%;
}
<body>
<div class="container" id="main">
<div id="content">
<div id="content-left">
<div>LEFT</div>
</div>
<div id="content-right">
<div>RIGHT</div>
</div>
</div>
</div>
</body>
Setting the width of the #content div to 100% will fix your problem. It's not a margin issue. For the width % to work on the inner divs, it needs a container width to base off of.
#content{
overflow: auto;
background-color:#FFFFFF;
margin-left: 0;
margin-right: 0;
width: 100%;
}
I have a wrapper div that holds a header, navbar, and a content div. when the content expands I want the wrapper div to expand with it however it currently doesn't do this. In other word I want the edges of the content to remain in the wrapper div. Once the content div expand beyond the height of the screen I need the scrollbar to appear on edge of the edge of the edge of the window.
my css:
* {
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
height: 100%;
overflow-y: auto;
}
body {
background-image: url(../Images/background1.jpg);
background-size: cover;
min-width:1000px;
background-repeat: no-repeat;
}
#wrapper1
{
height: 100%;
width: 94%;
margin-left: auto;
margin-right: auto;
background-color: #006699;
position: relative;
overflow: hidden;
}
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#header, #nav, #content
{
width: 94%;
margin-left: auto;
margin-right: auto;
}
#header
{
height: 15%;
background-color: Red;
}
#nav
{
height: 2%;
min-height: 35px;
background-color: Yellow;
}
#content
{
height: 100%;
background-color: brown;
}
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
</body>
http://jsfiddle.net/VB3PM/
Try this:
<style type="text/css">
html,
body
{
height:100%;
}
#wrapper
{
position:relative;
min-height:100%;
}
</style>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
Change the overflow CSS property of #wrapper from hidden to auto as shown below
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: auto;
}
I am using display: table-cell so that I can easily do height:100% the child elements inside to get 100% height.
The problem is that when I have multiple elements inside or padding or margins, the parent does not stretch and instead the contents poke through. Putting a overflow: hidden will not work as I need the children to fit inside the parent properly.
Mark up:
<div class="container">
<div class="subcontainer">
<h4>title</h4>
<div class="menu">
<p>test</p>
<p>test</p>
</div>
<div class="content">
<p>content</p>
<p>content</p>
</div>
</div>
</div>
CSS:
p{
padding:0;
margin:0;
}
html{
height: 100%;
overflow-y: scroll;
background: white;
}
body{
height: 100%;
margin: 0;
padding: 0;
background: red;
}
.container{
height: 100%;
display: table;
margin: 0;
padding: 0;
}
.subcontainer{
display: table-cell !important;
height: 100%;
}
h4{
padding: 0;
padding-bottom: 5px;
background: blue;
margin: 0;
border-bottom: 1px solid black;
margin-bottom: 5px;
}
.menu, .content{
background: green;
height: 100%;
display: inline-block;
float:left;
width: 200px;
padding: 20px;
}
.content{
background: purple;
width: 400px;
}
Fiddle: http://jsfiddle.net/ZQFrM/
The poking through is due to increased height inside caused by the following:
The existence of the h4 on top of the other elements.
Padding and margin on h4.
Padding on menu and content.
What can be done to resolve this problem? I definitely want to use the display: table-cell as I need the children to be able to stretch vertically to fill the parent.
you have to remove the float:left and display:inline-block from '.menu, .content' also you have to apply a display:table-cell. So both div can be align horizontally.
Here is the Code http://jsfiddle.net/kheema/ZBLY7/7/
Here is the CSS..
p{
padding:0;
padding:0;
}
body{
margin: 0;
padding: 0;
background: red;
}
.container{
height: 100%;
display: table;
margin: 0;
padding: 0;
}
.subcontainer{
display: table-cell !important;
height: 100%;
}
h4{
padding: 0;
padding-bottom: 5px;
}
.menu, .content{
background: green;
height: 100%;
/*display: inline-block;
float:left;*/
display: table-cell;
width: 200px;
}
.content{
background: purple;
width: 400px;
}