I am working on a page. When the content is bigger than the actual page, my scroll-bar is not placed at the right at - there is a small but recognizeable margin to the real end. It just happens on one small page. For the content-managemnt i use wordpress. The link to the page is here http://wp.cloudstarter.de/?page_id=156
You have the width set as 95% on the #page. Set the width to 100% and it should take care of it.
#page {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
max-height: 100%;
min-height: 100%;
margin: 0 auto;
overflow-x: hidden;
}
Remove "width: 95%" from #page
You have given width 100% to #page, just remove that width.
is block element and by default has width 100%.
#page {
position: relative;
z-index: 2;
/* width: 95%; */ just remove this width
height: 100%;
max-height: 100%;
min-height: 100%;
margin: 0 auto;
overflow-x: hidden;
}
Related
I have a problem with vertical scrolling on mobile devices, the page scrolls horizontally and the body height is set to 100vh, however i still can scroll down on mobile devices and it just messes up my content and shows some weird "loading" div
body{
overflow-x: scroll;
overflow-y: hidden;
width: 170vw;
max-height: 100vh;
}
How it looks after scrolling down:
how it should look:
Try setting height: 100vh instead of max-height and add position: relative like this:
body {
overflow-y: hidden;
height: 100vh;
position: relative;
}
/** CSS BELOW IS JUST FOR SHOW **/
div {
background: grey;
width: 200vw;
height: 200vh
}
<div></div>
Also, there is no need for the overflow-x. It will be automatic.
Okay, i've found the solution! adding !important fixed the issue
body{
overflow-x: scroll !important;
overflow-y: hidden !important;
width: 170vw;
max-height: 100vh;
}
body{
position: fixed;
top: 0;
bottom: 0;
}
I think this will fix it too....
I am new to css and I am finding some difficulty in setting my webpage to fit exactly the screen size but it doesn't fit and a scroll bar occurs. I have tried all the ways mentioned here But none of them works. My web page looks more or less like this. When i used
html{
height: 100vh;
}
body{
width: 100%;
height: 100vh;
background-color: #ffffff;
font-family: gothambook;
position: fixed;
top: 0;
bottom: 0;
}
The scroll bar didn't occur but the content went below the screen and was not visible
html {}
body {
height: 95vh;
}
vh stands for View Height and so 97vh is 97% the View/Browser's height.
https://css-tricks.com/fun-viewport-units/
For some reason 100vh makes it scroll a little.
height: 100vh is not good idea to give it full screen.
Try min-height: 100%
You can fix this problem by changing both height and width to 100%. In your code, you have written height as 100vh.
html,
body{
width: 100%;
height: 100vh;
}
after changing them both to 100% you might still be able to scroll but you can fix that by adding this:
overflow: hidden;
In general for fixing this type of problem for any project this setup I think will always work:
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
If you want to completely disable the scroll then you can replace your styles with only this
html {
overflow: hidden;
}
You're almost there. Target both html and body and set both their width and height to 100%.
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background: red;
}
If body's direct child has top and bottom margin, it is going to make it scroll. So, we need to take that into account.
This works well for me:
body {
height: calc(100vh - 4rem);
}
.content {
max-width: 98.57rem;
margin: 2rem auto;
box-shadow: -1px 0px 6px 0px rgba(0,0,0,0.75);
min-height: 100%;
}
<body>
<div class="content">
....
</div>
</body>
Below is a screen shot of my window image after scrolling window
I have given height of 45px to my header and for main section am using flex. Inside main section I have left-section and right-section. I want my left section to take full screen height whenever I minimize or maximize my window.
This is how my page looks when am scrolling. The left panel is not getting adjust with scrolling, though I have given height of 100%
HTML
<body>
<header></header>
<div class="main-section">
<div class="left-section"></div>
<div class="right-section"></div>
</div>
</body>
CSS
body {
min-height: 100%;
width: 100%;
overflow: auto;
display: flex;
flex-direction: column;
}
header {
height: 45px;
width: 100%;
overflow: hidden;
display: block;
}
.main-section {
width: 100%;
position: relative;
right: 0;
left: 0;
bottom: 0;
flex-grow: 1;
overflow: auto;
}
.left-section {
position: absolute;
width: 200px;
height: 100%;
}
Problem -
height : 100%
It refers to the height of Parent element (.main-section) and then sets height of the element(.left-section) to 100% of that. If the parent element's height is not set to anything then browser has nothing to refer to.
Solution - Set the height of .main-section then .left-section will take its height.
Hope this helps!!
My container is not touching my footer for the majority of cases and I'm not sure what's going on.
So here is my CSS code:
html {
min-height: 100%;
position: relative;
}
body {
margin: 0;
width: 100%;
height: 100%;
}
section {
height: 100%;
}
#container {
overflow: auto;
width: 80%;
margin: 0 auto;
background: red;
height: 100%;
}
.footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Here's my HTML:
<body>
<div id="container">
<section>
<p>Content goes here</p>
</section>
</div>
<div class="footer">Content</div>
</body>
So I have all of the heights set for parent elements,but there's still a big gap between the container and the footer. In cases where the content takes up the whole page, the footer and container ends up touching, but the content for some reason gets lost in the footer. How can I solve this issue?
Height based on percentage are tricky. vh is much better for such purposes.
Here is the solution: JSfiddle
#container {
overflow: hidden;
width: 80%;
margin: 0 auto;
background: red;
height: 100vh;
}
Make one adjustment to your CSS:
Add height: 100% to the html element.
html {
height: 100%; /* NEW */
min-height: 100%;
position: relative;
}
This will clear the way for all child elements to recognize their percentage heights, and the container will expand. Your min-height: 100% will still work because min-height overrides height.
DEMO: http://jsfiddle.net/au6tcodc/
(You'll notice a vertical scrollbar on the container in the demo. This is caused by the overflow: auto declaration in #container. If you want to remove the scrollbar switch to overflow: hidden (see all overflow values).
I am trying to get a full width background or image behind floated items within a max-width container. The page will be responsive so I can't fix the height of the .item objects nor be sure how many will be shown on each row.
I'd like to have a background or image running full length of the window aligned to a position in the .item div. I can use a very long div or image offset to the left without any issue but the right side makes the browser scroll which I don't want.
.bg {
background: red;
bottom: 0;
height: 30px;
left: -1000px;
position: absolute;
width: 2000px;
z-index: 0;
}
Fiddle here: http://jsfiddle.net/K8uAh/4/
The red banner is my background, see how it runs off to the right.
Ideally I would do this just using CSS, I know if I have to go the JavaScript route it all gets a bit clunky on the window resize.
You can use the .container. If you don't want the container to extend the entire width you need to remove overflow: hidden; and add it to an additional wrapper div.
body {
width: 100%;
margin: 0;
}
.container {
overflow: hidden;
}
Hi I tried on your fiddle and altered the width and the left attribute to have percentage instead of px as if we are dealing with px then it will be hard to make it responsive.
Code:
.bg {
background: red;
bottom: 0;
height: 30px;
position: absolute;
width: 125%;
left:-16%;
z-index: 0;
}
Fiddle: http://jsfiddle.net/K8uAh/1/
You can use a clear-fix div at the end of .item.
body {
width: 100%
}
.container{
background: red; /* Change your color here */
margin: 0 auto;
width: 100%
overflow: hidden;
}
.item{
background: #999;
float: left;
margin: 10px 5%;
position: relative;
width: 40%;
}
Fiddle
First : your fiddle css is incorrect :
body {
width: 100%;
}
} /*<- extra closing braces here is ruining your layout*/
see what i mean
second : to have a full width bg use:
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
container class should be :
.container {
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
margin: 0 auto;
max-width: 300px;
overflow: hidden;
}
working demo