Why is my footer not pressed to the bottom?
body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.main {
flex: 1 1 auto;
}
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<header class="header">Header</header>
<main class="main">Main</main>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
PS: If you change min-height % to vh then it works. Why is that?
I don't understand why it works like that.
The issue is with the use of min-height property set to 100%. This is telling the browser to set the minimum height of the wrapper div to be 100% of the viewport height, but since the main and header elements are also set to take up space, the footer is pushed down below the fold.
On the other hand, if you change min-height to vh, it works because vh (viewport height) is a unit of measurement that is relative to the height of the viewport and not the parent element. Therefore, it correctly sets the height of the wrapper div to be the full height of the viewport, and since the main and header elements have a flex: 1 1 auto property, they are taking up all the available space and the footer is at the bottom of the viewport.
Related
Condition 1: A 46px top bar
Condition 2: 1 photo at the top and the other at the bottom
I have tried the methods listed on How to resize an image to fit in the browser window?, but there is still slightly taller than the viewport. I have to scroll down to see the lower part of the photo.
How can I make it fit perfectly of the viewport? Do the size of the photos matter?
Simplest CSS tools are sufficient. So your topbar is 46px in height which means your images should reside on top of each other in a full viewport (100vh) but less 46 px. Lets share that 46px among images 23px each.
#topbar {
background: maroon;
display: table-cell;
vertical-align: middle;
text-align: center;
color: white;
height: 46px;
width: 100vw;
}
#mg {
display: block;
height: calc(50vh - 23px);
}
#jl {
height: calc(50vh - 23px);
}
<div id="topbar">Hi..! I am the topbar with a 46px height.</div>
<image id="mg" src="https://www.gazetemag.com/wp-content/uploads/2020/01/Mel-Gibson-1.jpg">
<image id="jl" src="https://i.tmgrup.com.tr/vogue/img/photo_gallery_b/18-08/15/jennifer-lopez-955778686.jpg">
using CSS GRID
The Idea is simple (code snippet below) but I will explain it well here so everyone can understand!
new answer
I used the calc(); function in CSS (is for doing dynamic calculations in your CSS)
I use this CSS VARIABLE for setting the height of nav
--nav-height: 46px;
so now for use, it write height: var(--nav-height); in your nav selector
if you want Two Images, One on top, and One on the bottom...
just write display: grid; in the parent element. in fact, the grid makes everything inside in a row. (that's simple)
don't use % for this, instead, use:
vh for height (is a metric equal to 1% of all height of the browser, no matter the parent width or height)
vw for width (is a metric equal to 1% of all width of the browser, no matter the parent width or height)
with vh this layout it will be also Responsive
Responsive = is work in all devices
normally if you want to set half-height for every image use 50vh
50vh = 1/2 screen Height (half screen)
but one problem...
your question is include also a nav in it...
I find a solution!
use this Formula:
--img-height: calc(50vh - ((var(--nav-height)) / 2))
the idea is:
set the height to half_Height
and get the NavHeight
decrease the half of NavHeight for every Image (so the two image be equal)
in the end:
set the width of images with auto
width: auto;
with auto your image not be stretched wrong.
the code
* {
--nav-height: 46px;
--img-height: calc(50vh - ((var(--nav-height)) / 2))
}
body {
margin: 0;
height: 100vh;
}
nav {
height: var(--nav-height);
background: blue;
color: white;
}
.container {
display: grid;
}
.container .image {
height: var(--img-height);
width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>my Awesome NavBar</nav>
<div class="container">
<img class="image" src="https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt="">
<img class="image" src="https://laaouatni.github.io/w11-clone/images/0light.jpg" alt="">
</div>
</body>
</html>
previous answer
if you want a Two Element, One on top, and One on the bottom...
just write display: grid; in the parent element. in fact, the grid makes everything inside in a row. (that's simple)
don't use % for this, instead, use:
vh for height (is a metric equal to 1% of all height of the browser, no matter the parent width or height)
vw for width (is a metric equal to 1% of all width of the browser, no matter the parent width or height)
so now set the height of 50vh in the images
50vh = 1/2 screen Height (half screen)
with vh this layout it will be also Responsive
Responsive = is work in all devices
set the width of images with auto
width: auto;
with auto your image not be stretched wrong.
previous code
body {
margin: 0;
}
.container {
height: 100vh;
display: grid;
}
.container .image {
height: 50vh;
width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img class="image" src="https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt="">
<img class="image" src="https://laaouatni.github.io/w11-clone/images/0light.jpg" alt="">
</div>
</body>
</html>
Could you please advise how to divide the screen into two halves horizontally? Here is my attempt, but the height=100% kind of doesn't work. (I intend the whole screen to be covered) How can I make it work? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hey I am a title</title>
<style>
.t7{width: 50%; height: 100%; background-color: #506970; }
</style>
</head>
<body>
<div class=t7>aaa</div>
<div class=t7>bbb</div>
</body>
</html>
Both the html and body tag should have their width and height properties set to 100%. By default the height won't be 100%, which is why these elements do not expand vertically. As a side note, you might also want to set the margin (specifically on the body) to zero.
Also, whitespace between elements can cause problems when you are trying to use up 100% of the width. And because you are using div elements, you will want to set their 'display' property to 'inline-block'. By default they use 'block', which causes a line break (effectively) after the element, so the two elements wouldn't be side-by-side.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hey I am a title</title>
<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
.t7{width: 50%; height: 100%; background-color: #506970; display: inline-block; }
</style>
</head>
<body>
<div class=t7>aaa</div><div class=t7>bbb</div>
</body>
</html>
In this case you can use vh units for the screen height.
vh – Relative to 1% of the height of the viewport.
Your code will look like that:
.html
<div class="top"></div>
<div class="bottom"></div>
.css
.top, .bottom {
height: 50vh;
}
As a result, the screen will be splitter in half horizontally.
In order for the CSS height property to work using percentages, the parent element must have a defined height. So to fix this, you must git the <body> a height of 100%. But in order for that to work, you must also give the <html> a height of 100%.
html, body { height: 100% }
Another option is to use the viewport width/height vw/vh measurement instead of percentage based measurement.
.t7 { width: 50vw; height: 100vh; ... }
I have a webpage where the background-color for the body fills the browser window when the content is short. At times the content may be large and fill the browser window. Is there any way of controlling the height of the body to fit the content? I have tried setting the height of the body to 100% and to auto but this does not help. Solutions that do not need Javascript are preferred. A minimal example is included:
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible">
<title>Minimal Testcase for Body Height Sizing</title>
<style>
html, body {
height: 100%;
}
body {
background-color: #f7fad4;
color: #262626;
}
</style>
</head>
<body>
<h1>Test Heading</h1>
<p>Sample text</p>
</body>
</html>
When I set the height of the body to auto, the height is correctly reported by the Chrome development tools, but the background-color overflows and fills the browser window. So the question becomes, how to prevent overflow of the background-color.
`
Set HTML background-color to white.
html{
background-color: white;
}
CSS body background is designed to fill the whole viewport if html doesn't have any style applied to it.
Try setting the height of the html element aswell
html {
height: 100%;
}
body {
min-height: 100%;
}
This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
Closed 3 years ago.
I am working on my first angular site and i'm trying to create a gradient div which fills the rest of the screen. When I set the height of the grad1 gradient, with px, it works fine. However, if I use a percentage like 50% or 100%, or just let it set the default height, it results in a height of zero. What could be causing this?
my-component.html
<div id="grad1"></div>
my-component.css
#grad1 {
width: 100%;
background-color: #b0afb4; /* For browsers that do not support gradients */
background-image: linear-gradient(#b0afb4, #fff, #b0afb4); /* Standard syntax (must be last) */
}
app-component.html
<div>
<app-home-display></app-home-display>
</div>
<router-outlet></router-outlet>
app-component.css is empty
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyWebApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
global styles.css
body {
margin: 0;
}
If your div has not content (text or other), its height will default to 0. If you want the div to fill the entire page you can use:
#grad1 {
height: 100vh;
...
}
It means you set div height to the full browser viewport height (useful for different screen resolutions).
Your problem is probably with css order. an easy way to handle it is to use flex for the parent tag (components generated). you can use :host key in css for that. example:
:host {
display: flex;
flex-direction: column;
flex: 1;
}
also make sure the first element having the max height (ex min-height: 100vh; in app-root host)
Why 2 divs are overflowing each other?
I have equally divided two divs with viewport width.
Insted of 50% width if I am giving 49% then code is working fine
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
.fity{
width: 50vw;
height: 100vh;
float: left;
}
</style>
</head>
<body>
<div class="fity" style="background:red;"></div>
<div class="fity" style="background:blue;"></div>
</body>
</html>
It's because of the vertical scroll bar.
MDN Information
Viewport-percentage lengths defined a length relatively to the size of
viewport, that is the visible portion of the document. Only
Gecko-based browsers are updating the viewport values dynamically,
when the size of the viewport is modified (by modifying the size of
the window on a desktop computer or by turning the device on a phone
or a tablet).
In conjunction with overflow:auto, space taken by eventual scrollbars
is not substracted from the viewport, whereas in the case of
overflow:scroll, it is. [My Emphasis]
If you add overflow:hidden to the body it gets fixed. -
JSFiddle Demo