Hi for mobile version I need margin bottom (white space from bottom of the screen) to the container, it was not working. I have tried position absolute still it was not working. I don't know what mistake exactly I did in here.
****Desktop version CSS****
#container {
width: 70%;
margin: 0 auto;
display: flex;
height: 100vh;
align-items: center;
}
****mobile version CSS****
` #container {
display: block;
text-align: center;
margin-bottom:25px;
}
****mobile version CSS****
` #container {
display: block;
text-align: center;
margin-bottom:25px !important;
}
You can use position: absolute; and set top left right bottom to 0, then bottom: 25px for mobile version:
.container {
background-color: red;
height: 100vh;
width: 70%;
position: relative;
}
.item {
background-color: black;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#media screen and (max-width: 780px) {
.item {
bottom: 20px;
}
}
<div class="container">
<div class="item"></div>
</div>
Use this :
<html>
<body>
<div id="container">
test content
</div>
</body>
</html>
And use these styles:
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body {
background-color: red;
}
#container {
background: blue;
color: white;
width: 70%;
margin: 0 auto;
}
#media(min-width:480px) {
#container {
height: 100%;
}
}
#media(max-width:480px) {
#container {
height: calc(100% - 30px);
}
}
Related
I'm working on a projet (HTML and CSS page) in which I have a navbar at the top of the page, a main container below the navbar, and a menu at the left.
The menu is hidden, and when I move the mouse to the left edge of the window, it appears, and overlaps the main container.
If I scroll the page down, the navbar scrolls, and the menu moves up until it reaches the top. Then it stops and keeps at this place.
I managed to achieve it, more or less. But I still have a problem.
To illustrate my project in a simple way, I took some basic code I found on css-tricks.com website and just modified it a bit to show my problem.
Here is the code :
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
.extra,
#wrapper {
display:flex;
width: 75%;
margin: auto;
background-color: #ccc;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
#media (min-height: 768px) {
#wrapper{
height: 2000px;
}
}
<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div class="extra"></div>
<br />
<div id="wrapper">
<div id="sticky">
sticky
</div>
<div id=brol>
This part should be overlapped by the sticky element
</div>
</div>
<br />
<div class="extra"></div>
Here, the 'extra' div is my navbar, the main container is the grey part, and the sticky element is the menu.
What I would like is that the main container (the grey part) is really using the full width and height, meaning that the text in it should appear at the top-left corner and be party overlapped by the sticky div.
How can I achieve that?
I have used z-index for overlapping content:
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
z-index: 2;
}
.extra,
#wrapper {
width: 75%;
margin: auto;
background-color: #ccc;
z-index:1;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
#brol{
margin-top: -100px;
}
#media (min-height: 768px) {
#wrapper{
height: 2000px;
}
}
// added .sticky-parent
.sticky-parent {
width: 0;
}
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
.extra, #wrapper {
display: flex;
width: 75%;
margin: auto;
background-color: #ccc;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
#media (min-height: 768px) {
#wrapper {
height: 2000px;
}
}
<div class="sticky-parent">
<div id="sticky">
sticky
</div>
</div>
<div id="brol">
This part should be overlapped by the sticky element
</div>
You can achieve this behavior by wrapping the sticky div inside a absolute positioned one. this will make the rest use the full available space.
Don't forget to add position:relative to it's parent, in your simplified case #wrapper to make sure it wont take the full width & height of the document or first relative parent it finds
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.extra,
#wrapper {
position: relative;
display:flex;
width: 75%;
margin: auto;
background-color: #ccc;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
#media (min-height: 768px) {
#wrapper{
height: 2000px;
}
}
<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div class="extra"></div>
<br />
<div id="wrapper">
<div id="mask">
<div id="sticky">
sticky
</div>
</div>
<div id=brol>
This part should be overlapped by the sticky element
</div>
</div>
<br />
<div class="extra"></div>
I'm designing my CSS layout, but can't get the div to stretch to 100% of the height of the parent.
I have a menu bar that takes up the top 13.714vh of the screen. Then I have a main div that I want to take up the remainder of the screen height which I did with height: 100%. bottom-container takes up the bottom 38.2% of the vertical space available in main, and I want speech-bubble to take up the remaining 61.8% of the vertical space in main.
For some reason though, there's a huge white container in the middle of the screen, and speech-bubble isn't taking up the remaining space because of it. Can anyone help me figure out what's going on?
Is there a problem with my HTML or did I make an error in the CSS?
Here's the code pen:
https://codepen.io/TheNomadicAspie/pen/NWjKwxE
body {
margin: 0;
}
.menu-bar {
height: 13.714vh;
width: 100vw;
background: darkblue;
top: 0%;
}
.main {
background: black;
grid-template-rows: 61.8% 100%;
height: 100%;
width: 100%;
padding-left: 1.5%;
padding-right: 1.5%;
padding-top: 1.5%;
padding-right: 1.5%;
}
.speech-bubble {
grid-row: 1;
position: relative;
background: orange;
height: 97%;
width: 97%;
border-radius: 4em;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 4em solid transparent;
border-top-color: white;
border-bottom: 0;
margin-left: -4em;
margin-bottom: -4em;
}
.email-container {
visibility: hidden;
}
.question-text {
visibility: hidden;
}
.bottom-container {
grid-row: 2;
position: fixed;
background: green;
height: 38.2%;
width: 100vw;
bottom: 0%;
left: 0%;
}
<div id="menu_bar" , class="menu-bar"></div>
<div id="main" , class="main">
<div id="speech_bubble" , class="speech-bubble">
<div id="email_container" class="email-container">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<button id="submit_email_btn" class="btn">Submit</button>
</div>
<div id="question_text" class="question-text">Question</div>
</div>
</div>
<div id="bottom_container" , class="bottom-container">
</div>
</div>
</div>
Do you want anything like this? screenshot.
If so, making your .menu-bar as position: relative and modifying your .main class styles as follows will work:
.main {
position: absolute;
background: black;
left: 0;
right: 0;
height: 50%;
}
Also, you may add margin: auto in your speech-bubble class to align it to center.
Your main tag is not taking full height as your html and body tags are not taking the full height.
Always remember that block elements can stretch maximum to their's parent's height, hence you need to give html and body tag height of 100%.
I have added the additional css below.
html, body { height: 100%;}
I think you want thing like this
* {
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.menu-bar {
height: 13.714vh;
background-color: tomato;
color: #fff
}
.main {
background: black;
padding: 1.5%;
flex: 1
}
.speech-bubble {
background-color: orange;
border-radius: 4em;
height: 95%;
position: relative;
display: flex;
flex-direction: column;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 4em solid transparent;
border-top-color: white;
border-bottom: 0;
margin-left: -4em;
margin-bottom: -4em;
}
.email-container {
align-items: center;
justify-content: center;
flex: 1;
display: flex;
}
.question-text {
height: 50px;
position: relative;
text-align: center
}
.bottom-container {
height: 70px;
background-color: lightseagreen;
}
Codepen demo
* {
box-sizing: border-box;
}
body {
background-color: #ddd;
margin: 0;
padding: 0;
}
main {
width: 100vw;
height: 100vh;
position: relative;
}
.chrome {
width: 100%;
padding: 0 32px;
left: 0;
height: 64px;
background-color: #ccc;
position: fixed;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
}
.chrome.top {
top: 0;
}
.chrome.bottom {
bottom: 0;
}
.container {
padding: 80px 32px;
position: relative;
z-index: 0;
}
.paper {
background-color: lightblue;
margin: 32px auto;
}
.content {
padding: 32px;
display: flex;
justify-content: space-between;
}
.portrait {
max-width: 210mm;
}
.portrait .content {
min-height: 297mm;
}
**Print CSS**
#page {
size: A4;
margin: 0;
}
#media print {
body {
width: 210mm;
height: 297mm;
}
body * {
visibility: hidden;
}
.chrome {
display: none;
}
.container {
padding: 0;
}
.paper, .paper * {
visibility: visible;
}
.paper {
margin: 0;
width: 297mm;
max-width: auto;
}
}
<main>
<div class="chrome top">
Render UI Header
<button id="print" onclick="window.print()">Print</button>
</div>
<div class="container">
<div class="paper portrait">
<div class="content">
<div>A4 Portrait</div>
<div>Right side stuff</div>
</div>
</div>
</div>
<div class="chrome bottom">
Renderer UI Footer
</div>
</main>
How it looks on Chrome print preview:
Safari print preview:
I have no idea why it isn't working in Safari. Does it not respect print styles like Chrome? Do I have some obscure browser setting that could be mucking it up?
Currently, I had the same problem and I fixed it by using adding margin to the left, I needed A4 format so the sizes were 210x297:
#media print {
#MainDivThatyouHave{
padding: 0 !important;
margin-left: calc(-100vw / 2 + 210mm / 2);
}
html, body{
size: A4 !important;
}
}
Instead of 210mm you can use the width you want and I don't think '!important' s are necessary there.
I know it's a bit late answer but if anyone has the same problem in the future, this solution should help.
I have 2 div inside a wrapper div. I wanted to stack div2 below div1 but it keep overlay div 1 instead. Can anyone help ?
Here my code
CSS:
#import url('http://fonts.googleapis.com/css?family=Wallpoet');
body {
margin: 0;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: blue;
}
.div1 {
position: absolute;
background-color: #bdc3c7;
width: 100%;
height: 75%;
margin: 0;
display: block;
float: left;
left: 0;
top: 0;
}
.div2 {
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
background-color: red;
}
.compass {
position: relative;
width: 180px;
height: 190px;
float: right;
margin-top: -1%;
overflow: hidden;
}
**HTML:**
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="div1">
</div>
<div class="div2"></div>
</div>
</body>
</html>
Have try solution like using absolute position but it doesn't work.
Change the css on div2 to position relative to the bottom
.div2 {
position: absolute;
width: 100%;
height: 25%;
bottom: 0;
left: 0;
background-color: red;
}
You have used absolute positioning to specifically place the div elements at the same position. Remove the absolute positioning (and float also), and the div elements line up one below the other:
#import url('http://fonts.googleapis.com/css?family=Wallpoet');
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
height: 100%;
background-color: blue;
}
.div1 {
height: 75%;
background-color: #bdc3c7;
}
.div2 {
height: 25%;
background-color: red;
}
<div class="wrapper">
<div class="div1">
</div>
<div class="div2"></div>
</div>
Try this instead https://jsfiddle.net/2Lzo9vfc/143/
CSS
.wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: blue;
}
.div1 {
background: #bdc3c7;
width: 100%;
display: block;
height: 75vh;
}
.div2 {
background: red;
width: 100%;
height: 25vh;
display: block;
}
Your're mixing several layouyt modes. If you use floats for this then you cant't mix it with absolute positioning...
Anyway div is a block tag, what means that your two divs should stack even if you don't set any css property to them, just give the a concrete height, for example 200px.
If you want to cover the full browser viewport, that is what I think you want then is enough with this:
.wrapper {
width: 100%;
height: 100vh;
background-color: blue;
}
.div1 {
background-color: #bdc3c7;
width: 100%;
height: 75vh;
}
.div2 {
width: 100%;
height: 25vh;
background-color: red;
}
I am building a 3 columns layout website. The header will fixed on the top and nav will fixed on the left. Then the wrapper will contain main and aside. What I want is main and aside can fill the wrapper's height.
And here is my css. You can also see my jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
z-index: 9;
background: red;
}
.nav {
width: 20%;
height: 100%;
position: fixed;
top: 100px;
left: 0;
background: green;
}
.wrapper {
width: 80%;
min-height: 100%;
margin-top: 100px;
margin-left: 20%;
position: relative;
}
.main {
width: 70%;
min-height: 100%;
position: absolute;
left: 0;
background: black;
}
.aside {
width: 30%;
min-height: 100%;
position: absolute;
right: 0;
background: blue;
}
.u-color-white {
color: white;
}
It seems that they can work well. But when the content's height in main or aside more than their own height, it will not work. I don't know how to fix it.
Can anyone help me?
Thx!
You have a very strict layout. everything is fixed..
what if you need to change the header from 100px height to 120? you'll have to change it accordingly in a lot of different places.
This is a pure CSS solution for your layout, without fixing any height or width. (you can fix the height or width if you want to)
This layout is totally responsive, and cross browser.
if you don't fix the height/width of the elements, they will span exactly what they need.
Here's a Working Fiddle
HTML:
<header class="Header"></header>
<div class="HeightTaker">
<div class="Wrapper">
<nav class="Nav"></nav>
<div class="ContentArea">
<div class="Table">
<div class="Main"></div>
<div class="Aside"></div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body:before {
content:'';
height: 100%;
float: left;
}
.Header {
height: 100px;
/*No need to fix it*/
background-color: red;
}
.HeightTaker {
position: relative;
}
.HeightTaker:after {
content:'';
display: block;
clear: both;
}
.Wrapper {
position: absolute;
width: 100%;
height:100%;
}
.Nav {
height: 100%;
float: left;
background-color: green;
}
.ContentArea {
overflow: auto;
height: 100%;
}
.Table {
display: table;
width: 100%;
height: 100%;
}
.Main {
width: 70%;
/*No need to fix it*/
background-color: black;
display: table-cell;
}
.Aside {
width: 30%;
/*No need to fix it*/
background-color: black;
display: table-cell;
background-color: blue;
}
.u-color-white {
color: white;
}
This is a pretty common problem. I'd recommend either having a background image for wrapper that makes it appear like aside has a min-height of 100% or using the method on this site:
http://css-tricks.com/fluid-width-equal-height-columns/
just see this fiddle.... hope this is what you want...
.aside {
width: 30%;
min-height: 100%;
position:fixed;
right: 0;
background: blue;
}
http://jsfiddle.net/h8r2z/6/