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)
Related
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.
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 div element, which has a background image that is centred on it. I want an h2 or p element to be positioned, (fixed or absolutely, am not sure which one is correct) on top of that div element, but not overlapping it. It should have the same bottom margin even when the window is resized. I have already tried putting an innerText inside of the div with the background image. I added the image like this:
<div>
<!-- other elements -->
<div class="v-container visible default background-image">
</div>
and in css:
.v-container {
background-color: #e9e9e9;
text-align: center;
font-family: cursive;
}
.default {
background-color: rgba(0, 0, 0, 0.103);
width: 100%;
height: 100%;
pointer-events: none;
}
.background-image {
background-image: url('../graphics/Note.png');
background-position: center;
background-repeat: no-repeat;
}
I tried for some time to solve my problem and I think I have gotten an answer to my question. Well, it is not exactly the answer I need but it gave the element above the image a constant spacing between the image and the top of its parent container. I achieved this using the top: x% and bottom: -x% CSS attribute. Where x represents the desired percentage. For example, top: 15% and bottom: -15% achieved the same thing. Am not sure why I had to use the '-' sign while using the bottom attribute, but it works. Sample code below of how I achieved this:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NoteBook 2.0</title>
<link rel="stylesheet" href="../styles/photon.css">
<link rel="stylesheet" href="../styles/main.css">
<script src="../UI/renderer.js" async defer></script>
</head>
<body>
<div class="invisible default v-container">
<h4>Tap a note on the left to view here</h4>
<h5>Or Tap the
<span class="icon icon-book"></span> icon at the left to add new note
</h5>
<img src="../graphics/Hand_note.png" alt="Note icon">
</div>
</body>
</html>
The stylesheet (CSS)
html, body {
width: 100%;
height: 100%;
}
.v-container {
background-color: #e9e9e9;
text-align: center;
}
.v-container :first-child {
position: relative;
top: 15%;
}
.v-container :nth-child(2) {
position: relative;
top: 15%;
}
.v-container :last-child {
position: relative;
top: 20%;
}
And the result:
From the image, it appears normal, but when you resize the window, the image still maintains a constant spacing with other elements. The text on top always stays 15% on its parent element because its position was set to relative. The text element below the first element child also has 15% set ( I guess, what it means is that, because the position was set to relative also, it still follows the order in which child elements appear in the parent container.
Can you post your code?
If you explicitly used an image as the background of a div then centering the element will be relative to the div itself and likely never really line up with the background image unless the aspect ratio is perfect.
A solution might be to create a nested child div and setup your margins relative to the parent.
Or you could set the image as an element instead of the background, this would make it much easier to reference.
It would be easier to help if I could see your code.
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%;
}