How i give 100% height to div when i give height 100% (It's not working) then i give height 100vh then min-height 100vh but it create extra space and div become more larger than required i also try max-height but not working. i want to give height 100% of element that any any small device it. In this example height is become greater than screen and make a scroll. how i get only 100% with out scroll with out missing any element.
<!doctype html>
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
<style>
.header
{
width:100%;
height:60px;
background:#000;
}
.main
{ width:100%;
min-height:100vh;
background:#C00;
}
#footer
{width:100%;
height:100px;
background:#0C3;
}
</style>
You can use calc() to take off the values of header and footer:
body {margin:0}
.header {
height: 60px;
background: #000;
}
.main {
min-height: calc(100vh - 160px);
background: #C00;
}
#footer {
height: 100px;
background: #0C3;
}
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
you can try like this
you have to give the parent always a defined height if not it is not working if you work with %
body{
margin:0;
height:100vh;
}
.header {
width: 100%;
height: 60px;
background: #000;
}
.main {
width: 100%;
height: calc(100% - 160px); /* here you calculate the 100% minus the 60px of the header and 100px of the footer*/
background: #C00;
}
#footer {
width: 100%;
height: 100px;
background: #0C3;
}
<body>
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
</body>
If you don't need Internet Explorer then you could use flexbox
body {
padding: 0;
margin: 0;
}
.wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1;
background-color: cyan
}
.header {
background-color: red;
padding: 10px;
text-align: center;
}
.footer {
background-color: green;
padding: 10px;
text-align: center;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="main">Content</div>
<div class="footer">Footer</div>
</div>
Related
My goal: A responsive navbar where the logo is always in the middle and an element
is always on the left. Depending on the context (page dependent), buttons can be
displayed in the right area or not.
My approach: I use a flexbox for the navbar. I have three divs in the flexbox. I have given all divs a fixed width. The middle box is also a flexbox. The div with a logo is located there. I position the logo on the right edge of the middle flexbox. The div with the logo has a fixed width (80px).
The problem: The approach works but I don't find this way very nice. Because the widths are dependent on each other. If you would change the logo and it would be wider or narrower then you would have to adjust the relative width of the middle and right box. The second problem is if the device smaller as 900px then this solution dont work.
Question: What other possibilities are there and what possibilities would resolve this "width" dependency?
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
width:20%;
background: green;
}
.header-middle {
width:34%;
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
width:46%;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>
You can use flex-grow: 1 on the left and right elements, the middle element will be in center naturally. In this case, you don't need to set widths on elements.
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
flex-grow: 1;
background: green;
}
.header-middle {
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
flex-grow: 1;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>
Since you're looking for different possibilities i'll suggest you to take the approch used by Tepken Vannkorn :
Centering brand logo in Bootstrap Navbar
Based on your comments, I would suggest the following code as a simple solution.
I have added a max-width value to your .logo CSS class and I have also moved your inline CSS from the front-end code, and created a .controller CSS class for it.
#app {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
header {
height: 80px;
display: flex;
justify-content: space-between;
}
.header-left {
width: 20%;
background: green;
}
.header-middle {
width: 34%;
background: gray;
display: flex;
justify-content: flex-end;
}
.header-right {
width: 46%;
background: green;
}
.logo {
background-color: red;
width: 80px;
height: 80px;
text-align: center;
font-size: 70px;
max-width: 80px;
}
.controller {
width: 50%;
background: black;
color: white;
text-align: center;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div class="controller">Controller Div 50%</div>
</div>
</div>
A solution would be to use a mix of flex and position: absolute. Then you need only the left and the right container. the logo you can center with position left: left: calc(50% - calc(80px / 2));. The 80px is the width from your logo.
* {
margin: 0;
padding: 0;
}
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
.header {
display: flex;
justify-content: space-between;
height: 80px;
background: yellow;
position: relative;
}
.header-left {
background-color: green;
width: 20%
}
.header-right {
background-color: green;
width: 44%;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;
font-size:70px;
position: absolute;
left: calc(50% - calc(80px / 2));
}
<div id="app">
<div class="header">
<div class="header-left">left</div>
<div class="logo">X</div>
<div class="header-right">right</div>
</div>
<div style="width:50%; background: black;">Controller Div 50%</div>
</div>
I have a fixed width element that needs to be centered when it fits on the page but if not then extend beyond the page width accessible with page scroll. I've got close to making this work but it overlaps the sidebar.
1/ How can I centre the large-fixed-grid (green element) if it fits inside the container/screen width but if not start it from after the sidebar?
2/ Additionally, if I scroll horizontally to show the fixed width element, the top-header shows a gap with difference between screen width and large-fixed-grid width (red element). Is there a way to offset the top-header inline with the scrolling horizontally so there is no white gap?
The yellow element should still be centred on the original width without scrolling. It currently behaves as expected.
I have tried lots of CSS variations but cannot get this working.
JSFiddle: https://jsfiddle.net/7tg2jo69/
Image:
Html:
<!DOCTYPE html>
<html>
<header class="top-header"></header>
<div class="page">
<div class="sidebar">
<div class="menu">Item1</div>
</div>
<main class="main">
<article class="content">
<div class="container">
<div class="row justify-content-center">
<div class="small-flexible-grid">
</div>
<div class="large-fixed-grid">
</div>
</div>
</div>
</article>
</main>
</div>
</html>
CSS:
.top-header {
height: 40px;
background:red;
}
.sidebar {
z-index: -1;
background:blue;
float: left;
width: 200px;
height: calc(100vh - 3.5rem);
position: sticky;
top: 0;
overflow-y: auto;
}
.main {
margin-left: 200px;
}
.content {
padding: 1.1rem;
}
.container {
max-width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.justify-content-center {
justify-content: center;
}
.small-flexible-grid {
background: yellow;
width: 60%;
height: 100px;
}
.large-fixed-grid {
background: green;
min-width:600px;
width: 600px;
height: 100px;
}
Update:
I've fixed 1/ by removing class justify-content-center entirely and adding margin: auto; to both .small-flexible-grid and .large-fixed-grid
how about change the styles to
.large-fixed-grid {
background: green;
width: 100%;
max-width: 600px;
height: 100px;
}
Solved both of these using the following
JSFiddle: https://jsfiddle.net/m9wdzgb1/
Html:
<!DOCTYPE html>
<html>
<header id="top-header-onscroll" class="top-header"></header>
<div class="page">
<div class="sidebar">
<div class="menu">Item1</div>
</div>
<main class="main">
<article class="content">
<div class="container">
<div class="row">
<div class="small-flexible-grid">
</div>
<div class="large-fixed-grid">
</div>
</div>
</div>
</article>
</main>
</div>
</html>
CSS:
.top-header {
height: 40px;
background:red;
}
.sidebar {
z-index: -1;
background:blue;
float: left;
width: 200px;
height: calc(100vh - 3.5rem);
position: sticky;
top: 0;
overflow-y: auto;
}
.main {
margin-left: 200px;
}
.content {
padding: 1.1rem;
}
.container {
max-width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.small-flexible-grid {
background: yellow;
width: 60%;
margin: auto;
height: 100px;
}
.large-fixed-grid {
background: green;
min-width:600px;
width: 600px;
margin: auto;
height: 100px;
}
Javascript:
window.onscroll = function (e) {
var top_header = document.getElementById('top-header-onscroll');
if (top_header) {
if (window.pageXOffset > 0) {
top_header.style.width = (window.innerWidth + window.pageXOffset - 30) + 'px';
}
else {
top_header.style.width = "";
}
}
}
I'm really struggling to create css layout like this:
Top row: fixed size: Ex: 50px;
Content: the biggest square the current width can fit. So width = height for this one. It should respect the bottom row min-height.
Bottom row: take all remaining space available, and with min-height. Ex: 50px.
No scrollbar. The idea is to use the current screen the best way possible for any resolution. No javascript unless it's only possible with js.
Any ideas?
That's the best I've got so far:
<div class="shell">
<div class="header"></div>
<div class="square"></div>
<div class="footer"></div>
</div>
css
body {
margin: 0px;
}
.shell {
background-color: #000000;
height: 100vh;
max-width: calc(100vh - 100px);
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.header {
background-color: #0000ff;
height: 50px;
}
.square {
width: 100%;
background-color: #dc143c;
}
.footer {
background-color: #00008b;
height: 100vh;
}
You can use padding to get the aspect ratio:
body {
margin: 0px;
}
.shell {
background-color: #000000;
height: 100vh;
max-width: calc(100vh - 100px);
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.header {
background-color: blue;
height: 50px;
}
.square {
width: 100%;
padding-top: 100%;
background-color: green;
}
.footer {
background-color: red;
height: 100%;
}
<div class="shell">
<div class="header"></div>
<div class="square"></div>
<div class="footer"></div>
</div>
Reference here
I think your question was already solved here:
Make a div fill the height of the remaining screen space
Mixed with your try:
body {
margin: 0;
}
.box {
display: flex;
flex-flow: column;
background-color: #000000;
height: 100vh;
max-width: calc(100vh - 100px);
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.box .row.header {
flex: 0 1 50px;
background-color: #0000ff;
}
.box .row.content {
flex: 1 1 auto;
width: 100%;
background-color: #dc143c;
}
.box .row.footer {
flex: 0 1 40px;
background-color: #00008b;
}
<div class="box">
<div class="row header">
</div>
<div class="row content">
</div>
<div class="row footer">
</div>
</div>
Fiddle: https://jsfiddle.net/901s2kdL/
Content: the biggest square the current width can fit. So width =
height for this one. It should respect the bottom row min-height.
If you want the biggest square, the footer height will be fixed and it will be equal to min-height always (and it should be), so it doesn't matter if you will set it's height to 100% or 50px. max-width of square determining really sizes. If you look at this max-width: calc(100vh - 100px), the - 100px part is the real remaining space including header and footer, so if the header height is set to 50px, the footer height is also 50px.
body {
margin: 0px;
}
.shell {
background-color: black;
}
.header {
height: 50px;
background-color: red;
}
.square {
max-width: calc(100vh - 100px);
margin: 0 auto;
background-color: green;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.footer {
height: 50px;
background-color: blue;
}
<div class="shell">
<div class="header"></div>
<div class="square"></div>
<div class="footer"></div>
</div>
I'm having a problem with two wrappers that I am using. I want to make the #wrapper always extend to the bottom of the screen. This is now working by using min-height: 100%;. Within this div I'm using another wrapper, #page-wrapper, which should be extended to the bottom of the #wrapper div. To make this work, the #wrapper div has to be set to height: 100% instead of min-height. Is there a way to achieve both?
#wrapper {
width: 100%;
background-color: #2f4050;
min-height: 100%;
position: relative;
}
#page-wrapper {
padding: 0 15px;
min-height: 100%;
background-color: white;
height: 100%;
}
<div id="wrapper">
<div id="page-wrapper"></div>
</div>
Try using viewport units.
#page-wrapper {
min-height: 100vh;
}
Example 1:
body {
margin: 0;
}
#wrapper {
background: pink;
}
#page-wrapper {
min-height: 100vh;
background: gold;
}
<div id="wrapper">
<div id="page-wrapper">
</div>
</div>
Example 2:
body {
margin: 0;
}
#wrapper {
background: pink;
}
#page-wrapper {
min-height: 100vh;
background: gold;
}
<div id="wrapper">
<div id="page-wrapper">
<div style="height:200vh;"></div>
</div>
</div>
I want to achieve the following: A design with two columns of the same width, covering the whole width of the document, or a fixed width of pixels, whichever is smaller. When they are resized to a certain width, they should be moved underneath each other and take up at most 100% of the width of the screen (exactly 100% would be nice, but is not necessary).
I came up with the following code, but the max-width of 100% does not get applied.
Can i combine a width in percent and a max-width in percent like this?
Is this possible without another layer of divs?
Is this possible at all?
#head {
background-color: #00FF00;
}
body {
text-align: center;
}
#container {
margin: 0 auto;
width: 100%;
max-width: 500px;
text-align: center;
}
#left {
background-color: #FF0000;
float: left;
width: 50%;
min-width: 150px;
max-width: 100%;
}
#right {
background-color: #0000FF;
float: left;
width: 50%;
min-width: 150px;
max-width: 100%;
}
<div id="head">
foo
</div>
<div id="container">
<div id="left">
bar
</div>
<div id="right">
baz
</div>
</div>
I think you need media queries. You can set the width for different viewports.
#head {
background-color:#00FF00;
}
body {
text-align:center;
}
#container{
margin: 0 auto;
width:100%;
max-width:500px;
text-align:center;
}
#left {
background-color:#FF0000;
float: left;
width: 50%;
min-width: 150px;
max-width: 100%;
}
#right {
background-color:#0000FF;
float: left;
width: 50%;
min-width: 150px;
max-width: 100%;
}
#media (max-width: 500px) {
#left { width: 100%;}
#right { width: 100%;}
}
<html>
<head>
</head>
<body>
<div id="head">
foo
</div>
<div id="container">
<div id="left">
bar
</div>
<div id="right">
baz
</div>
</div>
</body>
</html>
you may use flex and min-width: http://codepen.io/anon/pen/JXNMgd
/* added */
#container {
display: flex;
flex-wrap: wrap;
}
#left,
#right {
flex: 1;
}
/* your css cleared a bit */
#head {
background-color: #00FF00;
}
body {
text-align: center;
}
#container {
margin: 0 auto;
max-width: 500px;
text-align: center;
}
#left,
#right {
background-color: #FF0000;
min-width: 150px;
}
#right {
background-color: #0000FF;
}
<div id="head">
foo
</div>
<div id="container">
<div id="left">
bar
</div>
<div id="right">
baz
</div>
</div>