In the following snippet I want the body element to have scrollbars, but it doesn't behave as expected. I set the html element to height:100% which gets the height of the Initial Containing Block, and the body is 100% gets the height of the html element. Now I set the overflow: scroll on body to get scrollbars because I don't want the boxes to be visible outside of the body, but they remain in the same place. What am I missing? This is just a test, I am learning and reading the CSS specs to understand how height on html and body works. Thanks.
body {
background-color: red;
height:100%;
overflow: scroll;
}
html {
background-color: yellow;
height: 100%;
}
.box {
width: 300px;
height: 300px;
background-color: blue;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
Check the first answer from these question -> why body overflow not working?
You need to add overflow: auto to your html element.
Heres a pen: https://codepen.io/sebaLinares/pen/NOOdJM
Related
Here are two flex divs:
<div style="display:flex">
<div class="content">Content</div>
<div></div>
</div>
How to increase the height if first block if content is not fit inside?
I tried:
.content {
flex: 1;
height: 100%;
}
The problem will be solved using 100vh instead of 100%.
<!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>
</head>
<style>
.content {
flex: 1;
background-color: blue;
height: 100vh; // modified
}
</style>
<body>
<div style="display:flex">
<div class="content">Content</div>
<div>TEST</div>
</div>
</body>
</html>
.content {
height: max-content;
}
In my opinion this problem is solved by max-content.
Here is height: max-content.
Give me your opinion.
Thank you.
<div style="display:flex">
<div class="content">Content</div>
<div></div>
</div>
This question already has an answer here:
Why does 'overflow: auto' clear floats? And why are clear floats needed?
(1 answer)
Closed 1 year ago.
Recently I started learning css and while I was learning about float I didn't understand how overflow:hidden; Works with the float
I tried to go to w3schools and mdn
But I still don't understand how it works
.parent{
background-color: red;
padding: 10px;
overflow: hidden;
}
.parent div{
background-color: #eee;
float: left;
}
<!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">
<link rel="stylesheet" href="css/float.css">
<title>Document</title>
</head>
<body>
<div class="parent">
<div>product one</div>
<div>product one</div>
<div>product one</div>
<div>product one</div>
</div>
<p>this is a paragraph</p>
</body>
</html>
overflow: hidden; is a css property which prevent scrollbars from appearing, even if its necessary...
I will give an example using floats to show how it works,
HTML
<div class='container'>
<div id="div1"></div>
<div id="div2"></div>
</div>
CSS
/* *{
overflow:hidden;
} */
.container{
width:108vw;
height:100vh;
background:red;
}
#div1{
width: 600px;
height: 400px;
background: blue;
float: left;
}
#div2{
width: 400px;
height: 600px;
background: green;
float: right;
}
here, I purposely made the container larger than the screen size(which, obviously is 100vh, 100vw), so the scrollbars appear. Now i have two divs with floats and different colors so you can identify them. To actually see those divs, one must scroll down and towards the right;
Here is the link to the pen i made
https://codepen.io/codebyrudra/pen/XWaBOJr
Now, uncomment the
*{
overflow:hidden;
}
now you can see that the scroll bars are gone and you can no longer scroll to see those divs completely.
You can also try this property with display:flex; or display:grid;, it will yield the same result.
Hope this helped :)
overflow: hidden; only has a visible effect if you define width and height for that element and its contents would normally go beyond that width and height:
(widthhas a default of 100%, so it doesn't necessarily have to be defined in all situations)
.parent{
background-color: red;
padding: 10px;
overflow: hidden;
width: 200px;
height: 15px;
}
.parent div{
background-color: #eee;
float: left;
}
<!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">
<link rel="stylesheet" href="css/float.css">
<title>Document</title>
</head>
<body>
<div class="parent">
<div>product one</div>
<div>product one</div>
<div>product one</div>
<div>product one</div>
</div>
<p>this is a paragraph</p>
</body>
</html>
This question already has answers here:
Is it wrong to change a block element to inline with CSS if it contains another block element?
(9 answers)
Closed 2 years ago.
I'm tryng to show two inline div, each div is wrapping 2 block divs, my question here is
Why the inline divs arent showing the background, even when they have children, until I type something inside, the background is showing but only in the text, no wraping the children.
Here's my code:
.container{
background-color: rgb(37, 220, 20);
height: 100px;
width: 100px;
/* display:block; */
}
.item{
background-color: coral;
margin: 10px;
height: 25px;
width: 25px;
}
.block{
display: inline;
}
<!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 block" style="background-color: crimson">
<div class="item"></div>
<div class="item"></div>
</div>
<div
class="container block"
style="background-color: rgb(20, 180, 220)"
>
<div class="item"></div>
<div class="item"></div>
showing BG
</div>
</body>
</html>
Inline elements have no height or width as well as som other limitations on stying- you should make them inline-block to achieve your desired effect.
In the following snippet - I smily changed the styling to inline-block and it works as I believe you want it to - I was also able to remove the text from the second block.
Also - there does not seem to be a "flex-container" class on any of the elements.
.flex-container{
background-color: rgb(37, 220, 20);
height: 100px;
width: 100px;
/* display:block; */
}
.item{
background-color: coral;
margin: 10px;
height: 25px;
width: 25px;
}
.block{
display: inline-block; /* I changed this to inline block */
}
<!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 block" style="background-color: crimson">
<div class="item"></div>
<div class="item"></div>
</div>
<div
class="container block"
style="background-color: rgb(20, 180, 220)"
>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
when i was trying to make a responsive navbar i ran into this width problem
so here's the HTML code
body{
margin: 0;
}
.nav{
background-color: lightgreen;
height: 40px;
width: 100%;
}
.footer{
background-color: #333;
font-size: 18px;
padding: 20px;
width: 100%;
}
<!DOCTYPE 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="nav"></div>
<div class="footer">
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</div>
</body>
</html>
i it all worked fine until i go to the "developer tools" and viewed it on android, even though i make width 100% it still didn't reach the other end when i make it smaller
The problem that you are having is the footer. By default padding is added to the element's overall width and height. So when you give footer a width of 100% with 20px padding the width actually becomes 100%+20px+20px.
This can be easily overcome by adding box-sizing:border-box to your footer class. Or many people just set it to every element like *{box-sizing:border-box} so you won't have that problem again.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
border-box tells the browser to account for any border and padding in
the values you specify for an element's width and height. If you set
an element's width to 100 pixels, that 100 pixels will include any
border or padding you added, and the content box will shrink to absorb
that extra width. This typically makes it much easier to size
elements.
body{
margin: 0;
}
.nav{
background-color: lightgreen;
height: 40px;
width: 100%;
}
.footer{
background-color: #333;
font-size: 18px;
padding: 20px;
width: 100%;
box-sizing:border-box
}
<!DOCTYPE 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="nav"></div>
<div class="footer">
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</div>
</body>
</html>
I have created a horizontal scrolling website but for some reason chrome on ipad shrinks the entire layout to show it without enabling horizontal scroll.
I have created a test file to replicate this issue with following code:
<!doctype html>
<html class="no-js" lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Title -->
<title>Testing Horziontal Scroll</title>
<!-- For responsive behavior -->
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0">
<style>
.horizontal{
height: 500px;
width: 4000px;
}
.item{
width: 1000px; background: #f00; float: left; height:100%;
}
.item:nth-child(2){
background: #0f0;
}
.item:nth-child(3){
background: #00f;
}
</style>
</head>
<body>
<div class="horizontal">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
I tried removing view port meta tag and it fixed the issue but that created issues on other devices.
You could try adding the following to your CSS:
body {
overflow-y:scroll;
}
This will force the overflow to the left and right to be set to being scrolled.
Hope this helps!