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
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 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;
}
I'm trying to make a list of slide divs that will have content within them, something quite similar to what the Foo Fighter's have going on, on their website: http://www.foofighters.com/us/discography
The main thing I'd like to figure out is how to have each "slide" auto-adjust to be the proper height when the browser is resized. You can check it out yourself on the discography page I linked. Is there a way to accomplish this? I'm assuming it would be a javascript/jquery thing.
It's important to know that to have a 100% height on a block element, all of the parents must also be set to 100% height.
For example, my if html looks like this:
<!DOCTYPE html>
<html>
<body>
<div id="wrapper">
<div id="myDiv">This is my div!</div>
</div>
</body>
</html>
The CSS required to make myDiv 100% height would be
<style type="text/css">
html, body, #wrapper, #myDiv { height: 100%; }
</style>
Notice all of the parents of #myDiv are also set to 100% height. This is the key to achieving 100% dynamic height for block elements.
An example of getting a div to resize to browser window height:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
background-color: black;
margin: 0;
padding: 0;
}
#mydiv {
height: 100%;
width: 400px;
background-color: white;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div id="mydiv">TEST</div>
</body>
</html>
Tested in Chrome, IE9, Firefox and Opera, all running on Windows. IE9 required the DOCTYPE to be specified in order to work correctly, the other browsers didn't seem to care.
JQuery alternative: Set DIV height dynamically based on viewport height