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; ... }
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>
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%;
}
I am trying to make a horizontally scrolling website, the difficulty i am facing is to fix my page's height to the device's. Furthermore, if i fix the height's value in the css then it becomes hard coded for that particular screen size, so whenever i open the page on a differently sized monitor the hard coded value creates trouble. I have used a very basic css till now, here it is :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style media="screen">
#body {
width: 4000px;
height: auto;
max-height:100vh;
}
</style>
<title></title>
</head>
<body id=body>
--\\CONTENT GOES HERE \\--
</body>
</html>
This should give you what you are looking for. You can add an overflow-yproperty as well just to be sure y scrolling is disabled. Just make sure the rest of your content is responsive so that it can resize with the view height.
#body {
width: 4000px;
height: auto;
max-height: 100vh;
overflow-y: hidden;
}
According to this website
https://www.w3schools.com/html/html_blocks.asp
a div is a block element and "a block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can)."
Then why does this code not color the upper part of the page red?:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
</style>
</head>
<body>
<div style="background: red;float: left; height: 20%;"></div>
</body>
</html>
When I add "width = 100%" to the style of the div, I get what I expect without that variable. Why doesn't it stretch out by itself?
A floated empty div has no height or width.
You've given it a height, but it still has zero width. Only when it also has a width (or some content) will you see it.
The default block behaviour you've referenced doesn't apply to a floated element.
Because you have float: left in there (which only takes the width of its content and wouldn't make any sense for 100% width anyway) - just remove it:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
</style>
</head>
<body>
<div style="background: red;height: 20%;"></div>
</body>
</html>
In order to stretch out the floated div element, the styling for its width must be explicitly stated. If you neglect to specify it, then the browser only stretches it as much as it needs. So, either adding width="100%"to the DIV tag or adding width:100% to the its styling are options so that the floated div occupies the full width, even if it lacks content.
The source that the OP cites applies to an "unfloated" div element. But, a div that is floated, as is the case in the OP's CSS code, does not follow the usual rules per MDN:
...the element is taken from the normal flow of the web page, though
still remaining a part of the flow ...
In this particular case, since the OP indicates that the floated div should stretch out completely, it seems superfluous to have the div float left; that float property should probably be deleted unless the OP expects the width to dynamically change at some point.
Another way to stretch out the div element is to add this CSS to its styling: display:flex which creates a flex box.
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: grey;
}
div {
background: red;
height: 20%;
display:flex;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Note: while I removed the float property for the flex-box, you may leave it as it will have no effect on the flex-box.
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