I have the following webpage.
I am trying to get the blue red and white gradient to fill the entire height of the screen. Currently I have both flags on either side of the content container, all of them are surrounded by a main container.
.container{
width: 100%;
background: -webkit-linear-gradient( $blueToRed);
background: -o-linear-gradient($blueToRed);
background: -moz-linear-gradient($blueToRed);
background: linear-gradient($blueToRed);
margin-bottom: -99999px;
padding-bottom: 99999px;
overflow: auto;
}
is inside of firstContain
.firstContain{
border-left: 4px solid white;
border-right: 4px solid white;
background: #FFF;
max-width: 980px;
position: relative;
display: block;
margin: 0 auto;
overflow: auto;
z-index:1000;
}
I am trying to get contain to be 100% height, but I add that and it doesn't move. I thought the 99999 margin padding trick would work, and it did, but then I lost some css that made it work. Any help is welcome. Thanks in advance for the advice in what I am doing wrong.
Try vh unit.
.container{
min-height:100vh;
}
Try adding height: 100% in both your html, body, .container in your styles like this:
html, body, .container {
height: 100%;
}
.container {
border-left: 4px solid white;
border-right: 4px solid white;
background: #333;
max-width: 980px;
position: relative;
display: block;
margin: 0 auto;
overflow: auto;
z-index:1000;
}
<html>
<head>
</head>
<body>
<header></header>
<div class="container">
<p>Website Content</p>
</div>
<footer></footer>
</body>
</html>
For now, maybe you can go with
min-height: 100%;
in your container css, since there are no elements in the page to cover the height. So, min-height should do the work for you!
Related
Is there a way to center element horizontally in page with margin auto but also to have 100px left and right if viewport gets smaller, so it would be like this together:
margin: 0 auto;
margin-left:100px;
margin-right:100px;
Or do I need to have parent container for this?
the problem with auto is you can't even use it with calc(auto + 100px)
the most better and accurate way is to use flex
the justify-content property will center your element like margin: 0 auto; and you still have a room to play with margin
.parent{
height: 200px;
background: gray;
display:flex;
justify-content:center; /*center element*/
}
.child{
height: 100px;
width: 200px;
background: yellow;
margin: 0 100px; /*adding margin*/
}
<div class='parent'>
<div class="child"></div>
</div>
You can use border-left and border-right to add a border to the element's left and right hand side. Make sure you set the border color to transparent and add background-clip: padding-box to make sure the border is truly invisible:
.centered {
margin: 0 auto;
width: 100px;
height: 100px;
background: blue;
background-clip: padding-box;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
<div class="centered"></div>
Another approach is to use a parent element with padding:
.parent {
padding: 0 100px;
}
.centered {
margin: 0 auto;
width: 100px;
height: 100px;
background: blue;
}
<div class="parent">
<div class="centered"></div>
</div>
Depending on your use case you might be able to use the <body> as the parent, saving you from adding an otherwise superfluous parent element:
body {
padding: 0 100px;
}
.centered {
margin: 0 auto;
width: 100px;
height: 100px;
background: blue;
}
<div class="centered"></div>
You could use padding for this
Recently I have come across a problem for which I am not finding any appropriate solution.
Below is the image which gives an idea of what i am trying to achieve:
The div shown by the arrow is the mark of the problem which i am finding a solution for.
The problem is I want the div to be extended to full screen.
This div is inside a parent div who has a fixed width due to which i am not able to extend my image to full screen.
Have tried giving overflow to parent but isn't working.
I have tried below solution which is working to a certain extent but need a reliable solution.
width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;
Could someone please provide some solution to this?
html, body
{width: 100%; height: 100%; overflow: hidden;}
#parent{
display: block;
background-color: yellow;
border: 1px solid red;
position: fixed;
width: 200px;
height:100%;
}
#child1{
background-color: red;
display: block;
border: 1px solid yellow;
position: absolute;
width: 100vw;
margin-left: calc(200px - 100%);
//top:0px
}
<div id="parent">parent with position: fixed
<div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>
use Viewport Sizes so it will cover the whole page (vw and vh)
#first {
width: 100px;
height: 100px;
background:gray;
position: fixed;
top: 0;
left: 0;
}
#second{
width: 100vw;
height: 100vh;
background:blue;
position:absolute;
}
<div id="first">
<div id="second">
something
</div>
</div>
The below code snippet should work, if I understand your question correctly. Setting the width of the child div to 100vw makes the div 100% of the width of the viewport (window).
Also note that in order to get the child to start at the left of the viewport and not the left of the parent, I gave the child a position of absolute and a left of 0. Because the parent is not positioned, it starts the left of the child at the left of the viewport (the closest positioned ancestor).
#parentDiv {
width: 250px;
height: 250px;
margin: 0 auto;
background-color: orange;
border: 2px solid red;
}
#childDiv {
/* 100vw is 100% of the viewport width. */
width: 100vw;
height: 50px;
background-color: lightblue;
box-sizing: border-box;
border: 2px solid green;
position: absolute;
left: 0;
}
p {
text-align: center;
}
<html>
<body>
<div id="parentDiv">
<p>Parent</p>
<div id="childDiv"><p>Child</p></div>
</div>
</body>
</html>
I am aware about the concept of 'margin-collapse'. But , why am I not able to see 10 px margin on the top of the first box here. The top box(which has the id 'first') should have 10px margin above it. If this is not the correct wat to get it, then what is it? And, why this doesn't work.
CSS:
#Main{
background-color: gray;
position: relative;
width: 200px;
height: 300px;
}
.box{
position:relative;
height: 60px;
width: 175px;
background: black;
margin: 10px 10px 10px 10px;
}
HTML:
<div id="Main">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
I know one way could be that we can give 10px padding to the parent div. But then why doesn't this thing work?
The margin: 10px 10px 10px 10px in your code moves the "Main" box as well.
If you want to move the box with id "first" only, use position:relative; top: 10px;
jsfiddle demo
edit: I don't know to say for sure why this happens but my guess is it is because the display of the "Main" box is block by default.
When you use display: inline-block; on the "Main" box, the problem is fixed. (jsfiddle)
This is how browsers interperit the code. It does not output the expected result which would be a 10px gap between the top of the child and the outter parent. You could add padding-top to the parent, alternatively you could assign overflow:auto; to your main div.
DEMO http://jsfiddle.net/kevinPHPkevin/2f4Kz/4/
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
overflow:auto;
}
Another way around this is to add a transparent border around the main div (stops margin collapsing)
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
border: thin solid transparent;
}
The third a final option (to my knowledge) is to stop the margin collapsing by setting padding-top: 1px; margin-top: -1px; to the parent div
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
padding-top: 1px;
margin-top: -1px;
}
I'm trying to build a CSS page layout based on this old frameset:
<frameset cols="30%,70%">
<frame>left</frame>
<frameset rows="80%,20%">
<frame>top</frame>
<frame>bottom</frame>
</frameset>
</frameset>
What was easy 15 years ago seems to get a bit more complicated nowadays. I wrote the following HTML:
<div id="container">
<div id="left">left</div>
<div id="right">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</div>
Together with this CSS:
#container {
border: 1px solid black;
height: 300px;
}
#left {
border: 1px solid red;
float: left;
width: 30%;
height: 100%;
overflow-y: scroll;
}
#right {
border: 1px solid blue;
margin-left: 30%;
height: 100%;
}
#top {
border: 1px solid red;
height: 80%;
overflow-y: scroll;
}
#bottom {
border: 1px solid red;
height: 20%;
}
I put a demo here.
What I want to achieve and failed so far is the following: Height of #bottom shall be a certain pixel height, not percents. When I do this, I mess up with #top. I tried to use absolute positions to stick #bottom at the bottom but then I don't know how to let #top use the rest of the height.
Any ideas would be appreciated. Thank you.
I think this (fiddle) what you are looking for.
#top {
border: 1px solid red;
height: 80%;
overflow-y: scroll;
}
#bottom {
bottom:0;
border: 1px solid red;
height: 20%;
}
The divs will look like they don't precisely fit but it's only because of the borders. If you want the borders then you can use the css box-sizing property and set it to border-box. See this page for reference. Basically it makes the size of an element include the border which it doesn't by default.
I am trying to implement a sticky footer for a site i'm working on (see here). I attempted to follow the guide on CSS Sticky Footer - specifically, this implementation.
This is working perfectly in Firefox (13) but in Chrome (21) and IE (9) the #footer is pushed further down the page adding a vertical scroll bar. I assume this is something to do with the use of padding and margins inside my #wrapper - however I am unable to put my finger specifically on the issue. I would really appreciate some help.
The site structure:
<html>
<div id="wrapper">
<div id="header"></div>
<div id="menu"></div>
<div id="page"></div>
</div>
<div id="footer"></div>
</html>
and the relevant CSS:
#wrapper {
min-height: 100%;
width: 100%;
}
#header {
background: url("/images/backgrounds/transparent.png") transparent;
border-bottom: 2px solid #EF7C31;
height: 44px;
margin: 0 auto 20px;
width: 960px;
}
#menu {
background:#FFFFFF;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
height: 60px;
margin: 0 auto 20px;
padding: 10px 20px;
width: 920px;
}
#page {
background: #FFFFFF;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin: 0 auto 30px;
overflow-x: hidden;
overflow-y: auto;
padding: 20px 20px 30px;
width: 920px
}
#footer {
background: url("/images/backgrounds/transparent.png") transparent;
border-top: 2px solid #EF7C31;
clear: both;
height: 116px;
margin-top: -158px;
overflow: auto;
padding: 20px;
position: relative;
}
Thank you
Add this line to the wrapper:
overflow: hidden;
So you would have:
#wrapper {
min-height: 100%;
width: 100%;
overflow: hidden;
}
Alternatively add a push div just before the footer. This will push the footer down.
I noticed a few things that were causing some issues. The tutorial you linked to is marked as malicious here at work so I have always used Ryan Fait's CSS Sticky Footer Tutorial.
Checking what you have off of that I noticed a few differences. First of all, you need to set the html body and height as 100% for this to work in all browsers. Secondly, your padding and your border were causing issues, so I created another div that would contain the specific content within your footer and would have the padding and the border css included on it.
HTML:
<html>
<div id="wrapper">
<div id="header"></div>
<div id="menu"></div>
<div id="page"></div>
<div class="push"></div>
</div>
<div id="footer">
<div class="footerContent"></div>
</div>
</html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
width:100%;
margin: 0 auto -158px; /* the bottom margin is the negative value of the footer's height */
}
#footer, .push {
height: 158px; /* .push must be the same height as .footer */
}
.footerContent {
border-top: 2px solid #EF7C31;
padding:20px;
}
Live DEMO