Menu
I have implemented liquid layout for my website. I have set width of body tag to 100%.
<html>
<head>
</head>
<body>
<div id="container">
some content
</div>
</body>
body
{
margin: 0;
padding: 0;
width: 100%;
}
For some pages vertical scrollbar is displayed. Because of which body tag width reduces by 16px. I need to set body width in such a way that display of scrollbar doesn't affect it.
I have tried following but it didn't work with FF9. :
body{ width: -moz-calc(100% - 16px); }
Can any body suggest a way to achieve this?
729
Many assume that width: 100vw is the same as width: 100% . This is true on a page that doesn't scroll vertically, but what you might not realize is that the viewport actually includes the scrollbars, too.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
A horizontal scroll bar enables the user to scroll the content of a window to the left or right. A vertical scroll bar enables the user to scroll the content up or down.
One way to work around this is to make sure scroll bars are always present. You can then style your pages with confidence that they're not going to shift left and right.
html,body
{
height:101%;
}
You can also do:
html {
overflow-y: scroll;
}
(I don't think the overflow method works with Opera though)
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
