Here is the photo of the border of the body
As you can see the body is not at 100% height.
Here's the CSS codes of the HTML and Body
html{
height: 100%;
min-height: 100vh;
}
body{
height: 100%;
min-height: 100vh;
font-family: sans-serif;
min-width: 400px;
position: relative;
display: flex;
justify-content: center;
border: 5px solid black;
padding: 0;
margin: 0;
}
I tried putting the height of the html and body separately but it still didn't work. I tried searching and them saying make min-height and height at 100% or 100vh and so I did but it still didn't work. I think it is because those things that are over the body are overflowing from its container?
Edit: I forgot to add this but the reason why I want body to extend along with the overflow is because that left and right container is positioned as sticky. So I can't use overflow: hidden;
I can try putting the left and right container as position: fixed; but it does not take space so I have to resize everything and also I want to know what is happening so I can avoid this problem.
Here's the whole code
https://codepen.io/n01knowz/pen/qBpBapV
I'm new to CSS so I don't know if there's any writing problem there so please tell me what I can fix.
Update: Okay so the reason the body wasn't extending was because the container is overflowing and technically isn't getting any bigger and so the body isn't expanding because its child's height isn't expanding too. So that's the danger of using when you set the height of the container.
Solution: Just let the container's height be and let the child components of the container be the one to decide its height.
Add in the overflow attribute. Which can work more than one way.
If you want no scroll bar use hidden, if you want to keep the content you can use scroll.
body {
overflow: hidden; /*any content that would overflow would be hidden and there is no scroll bar, NOTE, this will not stop the containers from overflowing. */
overflow: scroll; /* this would place scroll bar once the content overflows */
overflow: auto; /*will only add the scroll bar only after content over flows but will not add if it the content does not overflow */
}
Related
I am using the Bootstrap Modal to display some content on my webpage. I have set the height of the modal to a fixed 80% to work properly in long screens because I have a lot of content in the modal-body. With the 80% height I would like the Header and the Footer to be fixed in their places but the entire content seems to be scrollable i.e. either my header or footer go on scrolling. I want to keep the header and footer fixed on their places with the modal-body being scrollable. I have tried using position:absolute and position:fixed but it does not seem to be working. How can this be done i.e. keep the header and footer fixed with the body scrollable ?
You have to set the height of the .modal-body in and give it overflow-y: auto. Also reset .modal-dialog overflow value to initial.
.modal{
display: block !important; /* I added this to see the modal, you don't need this */
}
/* Important part */
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 250px;
overflow-y: auto;
}
try with this below css will may help you.
.modal-body {
position: relative;
padding: 15px;
max-height: 600px !important;
overflow-y: scroll;
}
On mobile devices when a position:fixed; element appears on the screen the user can scroll the <body>, through the fixed element.
body,
html{
overflow: hidden;
margin: 0;
padding: 0;
}
#fixed {
background: red;
position: fixed;
left:0;
top: 0;
width: 200px;
height: 100%;
}
#content {
background: blue;
height: 3000px;
}
I tried to add overflow:hidden for <html> and <body> but it didn't help. I would like to prevent scrolling through the fixed element, but I would like to allow the scroll, when the fixed element is visible, but the user scrolls on <body>.
I tried this with ios and android devices. What is the best solution to solve this?
background:fixed
will make the rest of the body scroll through the fixed element. That is is the default behaviour. By the looks of it, you want the fixed element to be positioned at the top of your page. Why not keep it is a separate container with position absolute and rest of the body in a different container. Then, add the scroll to the rest of the body keeping HTML, body at 100% height. you may need to keep the height fixed for the 2nd container.
I have a problem with oveflow-x in my page. Althought the body has overflow-x hidden, I can still scroll on the page.
<html>
<body>
<div id="content">
<div id="mydiv"></div>
<div>
</body>
</html>
html and body have overflow-x:hidden.
Div "content" has nothing in the css and div "myDiv" has position absolute.
How can I make the "mydiv" not to go out of the page? Because now what happens is that I can still scroll on x.
Fiddle > http://jsfiddle.net/o7dph6sj
Without more code, the best answer I can think of is that your html and body tags do not have any kind of width set so they are inheriting the default width of 100%. Meaning that every child element is going to be inside of that 100%.
Set the body to have a set width and then set overflow to hidden, then check if the elements in your page are exceeding the width.
Example:
body{
width: 1024px;
overflow-x: hidden;
}
Also, the code that you set inside of #content could directly be affecting it as well, some elements will ignore its parents and be rendered outside of them which brings us back to... give us more code.
Because you're using a bad selector for overflow. If you want to avoid VERTICAL SCROLLING you use this:
html, body {
overflow-y: hidden;
}
to avoid HORIZONTAL SCROLLING:
html, body {
overflow-x: hidden;
}
to avoid BOTH
html, body {
overflow: hidden;
}
take a look to your forked fiddle where I avoid BOTH overflow axises and there's no overflow at all
Change "overflow-x: hidden !important;" to be
html, body {
overflow: hidden !important;
}
or
html, body {
overflow-y: hidden !important;
}
In-fact you can ignore "!important" since you use !important to override other rule. And here you were just using the wrong property "overflow-x" which is for "Horizontal scroll"
And it works!!!
Here is the working Fiddle > http://jsfiddle.net/o7dph6sj/1/
Updated the Answer with addition requirement:
You add "overflow: hidden" when you don't want both scrolls,
AND "overflow-y: hidden;" hides the Horizontal Scroll
AND "overflow-x: hidden;" hides the Vertical Scroll
Checkout the updated Fiddle and try on your by commenting and un-commenting this code:
html, body {
overflow-y: hidden; /* Hides Horizontal Scroll*/
/*overflow-x: hidden;*/ /* Hides Vertical Scroll*/
/*overflow: hidden;*/ /* Hides Both Vertical and Horizontal Scroll*/
}
Updated Fiddle "http://jsfiddle.net/o7dph6sj/3/"
Checkout these articles >
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
I tried for several hours and I found that the body size needs to be specified, and its attribute position must be set to absolute. Then you can have overflow-x: hidden work well in your code.
in this case, I have a web with a navbar that I want to slide right to hide from the main body in mobile size. I called #media screen and (max-width:576px) to make it run on mobile size. the problem occurred before I specify the max-width the body must be shown: I still can scroll to the right though I specified the overflow-x: hidden
so I added max-width:100vh inside the body style, and voila. it works!
checkout my code:
body{
min-width: 0px;
max-width: 100vh;
position: absolute;
overflow-x: hidden;
}
nav ul {
position: absolute;
right: 0;
width: 40%;
top: 34px;
height: 100vh;
z-index: 1;
background-color: #194ca7;
}
I have two Elements horizontally aligned, and the left one is a list. If I add some items so that the list should start scrolling, the list just grows larger then my device height is and my second content on the right side scrolls away if I scroll the list downwards. So the list is more then 100% in height... Here is some code for you :
http://codepen.io/anon/pen/qhylB
As I have created this code I just noticed that my both divs don't scale to 100% of the device width. Could you explain me why?
It's because the scrollbar is on the body (or html for firefox I think). Instead you need to have the body's height fix to 100% and then move the scrollbar to the list container (33percent div):
http://codepen.io/jonigiuro/pen/JEkLH
html, body {
margin: 0px;
padding: 0px;
height: 100%;
max-height: 100%;
overflow: hidden;
}
.content33percent {
height: 100%;
max-height: 100%;
overflow: scroll;
}
i changed your 66% to a fixed position, now when you scroll down it looks like you are scrolling the list when you are actually scrolling the whole document, this way you can apply the scrolling over the complete document:
http://codepen.io/anon/pen/KLzvo
.content66percent {
background-color: blue;
height: 100%;
width: 66%;
position: fixed;
right: 5px;
also, i have removed the floating from both the 66%er and the 33%er and adjusted them a little. if you want them to touch each other, change 66% to 66.53%.
I know this has been discussed here many times, but none of the answers I found here, seem to address my problem.
I have this variable (in height) layout, and wnat the footer to always stick to the bottom.
I have used the min-height: 100%; to the container div, and got it somehow to always be in the bottom. trouble is, it's sinking too low to the bottom.
I've put an example here:
http://jsbin.com/erono3
As you can see, my footer is at the bottom, but will go too far in the bottom, and even though there's space on the page to display it, it's creating a scroll bar.
Also, I'd like the main container to to be shown as big as the content is (i.e. closing the square), but right now, it looks like the container is going all the way to the bottom, and my footer is covering it.
What am I doing wrong there?
Thanks in advance
You should take a look at the link by Ben Lee again :). I have used that in your layout to achieve the effect you want. See it here: http://jsbin.com/erono3/2
The important thing is for the footer to be part of the container. The container has a min-height of 100%. So it occupies the whole screen always. The header is normal what ever it is inside.
Then you should have an inner container element (important), where your main content resides. In the link above, it has the id #body. This would have a padding-bottom (to give space to the footer.
The footer is absolutely positioned with a bottom:0px meaning it is always going to be at the bottom of the container (the container has to be position:relative).
EDIT (in response to the comment)
To make your footer span the entire page, but keep everything else centered, just do this:
remove the width off of the #containter, #container spans the whole page. Provide a width to the #body element in the link above and center it, using margin: 0px auto. You get the effect you wanted.
New link: http://jsbin.com/erono3/5
Here's a simplified version of this, which is worth reading for the explanation. See if you can adapt yours to fit.
CSS:
html, body, div {
margin: 0;
border: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrap {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background-color: #aaa;
}
and HTML:
<div id="wrap">
<div id="content">Stuff goes here.</div>
<div id="footer">FOOTER</div>
</div>
The problem is you have a min-height of 100% on your container div. That means that the container will be 100% the height of its parent, which is the body tag which has a height of 100%. So if your viewport is 600px, then your body will be 600px, then your container will be 100% of that which is 600px, and then it will stick the footer after the container div which is why it goes below the veiwport.
So one thing you can do is just absolutely position your footer inside the body. Do this by changing your position to be absolute, and bottom:0px. It will float at the bottom.
You might want to put it in your container as well depending on what style you are going for and position it absolute in that and at the bottom.
Your problem is not that the footer is too low, but by making the body 100% it pushes the footer below the bottom of the page.
Consider putting the footer div inside the container div and getting rid of the margin-top: -5.5em and position: relative and it will work just fine.
http://ryanfait.com/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
This is particularly for anyone using ASP.NET master pages but also in general, if your content is also wrapped in a <form> element you will need to change
html, body {
height: 100%;
}
to
html, body, form {
height: 100%;
}