My sticky header covers the vertical scrollbar, is there a way to fix this?
URL: http://jlwebdesigns.co.uk/
Header code (using a HTML5 tag)
header {
background: none repeat scroll 0 0 #283744;
border-bottom: 4px solid #4F5B66;
height: 97px;
margin-top: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
Yeah make that element have a higher z-index and make sure you set a positioning such as relative or what not to that element.
header {
background: none repeat scroll 0 0 #283744;
border-bottom: 4px solid #4F5B66;
height: 97px;
margin-top: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
Underlying element
#underlyingelementwithscrolls{
position:relative;
z-index:1000;/*higher than 999 since header has it*/
}
in your case you have overlayed the bodies scroller
do this and it should get fixed
body{
overflow:hidden;}
html{
overflow-y:scroll;}
solution is not very neat but give margin-top: 97px; to the below div....based on ruddy's fiddle :
here is a demo
After reviewing your page you can change a couple of things...
Your banner is at 100% but it also has a padding which makes your banner to exeed the 100%. You try to avoid this by putting the overflow hidden in the html, body but that makes your header to overlap the scroll bar.
Solution:
html, body {
width:100%;
overflow:hidden; //remove this
}
#homeBanner {
width: 100%;
background: url(../img/bannerHolder.jpg) center no-repeat #558582;
text-align: center;
margin-top: 100px;
padding: 13% 2%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
I looked at the site and a simple fix is to put:
margin-top: 97px; // if header has some padding so count that too.
Put that margin on the section in the CSS. This will fix the scrollbar but will break the logo. You will have to replace some stuff because of the new margin.
Here is a demo using the margin-top. You can see the text under the header. Take the margin away and it will hide behind the header.
DEMO
Note: Just seen there's more then 1 section. You could just wrap them all in a div and give that the margin. Or use :first-of-type.
Related
Hi I recently made my site navigation "sticky" for : https://shiftins.com. The only problem is the height of the navigation has been removed from the page and looks like it became a separate layer that "floats" over the page. It ends up hiding some of the top parts of my page content. I tried adding margins and padding to various containers but there are too many different ones sitewide. Is there a solution that will make my site honor the height of the sticky navigation site wide?
Here is the code I used:
.site-header {
position: relative;
z-index: 999;
background: #0074E5;
background: #0c5798;
height: 60px;
box-shadow:inset 0 1px 7px rgba(0, 0, 0, 0.2);
}
.site-header .wrap {
padding: 0;
}
.site-header {
position: fixed;
width:100%;
height: 60px;
}
You need top:0; on your fixed header. Then add the margin to a global div like site-container like this this:
.site-container{
margin-top: 60px;
}
.site-header {
position: fixed;
width:100%;
height: 60px;
top:0;
}
float element always remove the parent height so you have to use overflow:hidden: on parent element or apply clearfix hack/class
see this Css trick
Although I set the width of my footer to 100%, there it extends to more than 100% having a scroll bar in terms of width. Any ideas why? I know the problem is the width because when I remove the 100%, it does not show the scroll bar. The page is broken down to body>wrapper>footer
Here is my code:
#footer {
margin-top: 30px;
color: white !important;
padding-bottom: 15px;
background: black;
text-align: center;
padding: 20px;
height: 40px;
min-width: 1000px;
width:100%;
position:absolute;
bottom:0;
}
And there is the body css:
body {
font: normal 12pt Georgia, serif;
color: #111;
background: #990000;
margin: 0 auto;
text-align: center;
background-position: 50% 50%;
min-height: 100%;
margin:0;
padding:0;
height:100%;
}
And the wrapper css:
#wrapper {
min-height:100%;
position:relative;
}
You have padding set in your footer's css. That adds up to the width and makes it bigger than 100%. That's why you are seeing a scrollbar.
Replace the padding with these following lines.
padding-top:20px;
padding-bottom:20px;
Also by setting footer div's min width to 1000px, you will get the scrollbar in browser screens narrower than 1000px.
Many browsers have a default margin around the BODY element, which adds to the width.
Most likely this is due to how the default Box Model works in html pages: after the width is set to 100% for content, the borders, margins and paddings are added, increasing the final width beyond 100%.
For modern browsers: hail box-sizing!
See this jsfiddle with your original code.
See this newer version with box sizing set to border-box (only works in newer browsers). This version doesn't show a horizontal scrollbar (I made the min-width a lot smaller, or it would throw off the example in jsfiddle).
For older browsers
If you want to fix this for older browsers you'll have to do something about the padding in your CSS. Remove it from the footer, and place a "footer-content" div inside with margins equal to your old paddings. E.g.:
#footer {
/* padding: 20px; removed! */
}
#footer-content {
margin: 20px;
}
This is happening because of the padding. See the illustration of your problem here.
When you use padding, the size gets added to the total height and width respectively.
Removing the padding will fix your problem. Demo
#footer {
margin-top: 30px;
color: white !important;
background: black;
text-align: center;
height: 40px;
min-width: 1000px;
width:100%;
position:absolute;
bottom:0;
}
Another good solution is to make the browser treat your element differently. by using box-sizing property.
#footer {
/* Add box-sizing */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
margin-top: 30px;
color: white !important;
padding-bottom: 15px;
background: black;
text-align: center;
padding: 20px;
height: 40px;
min-width: 1000px;
width:100%;
position:absolute;
bottom:0;
}
Demo
Just add 0 padding, 0 border and 0 margin to all elements at start.
* {
padding: 0;
border: 0;
margin: 0;
}
I have a modal dialog in my app which can get quite long in the y direction. This introduces a problem whereby some of the content of the dialog is hidden off the bottom of the page.
I would like the window scrollbar to scroll the dialog when it is displayed and too long to fit on the screen but leave the main body in place behind the modal. If you use Trello then you know what I'm going for.
Is this possible without using JavaScript to control the scrollbar?
Here is the CSS I have applied to my modal and dialog so far:
body.blocked {
overflow: hidden;
}
.modal-screen {
background: #717174;
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.9;
z-index: 50;
}
.dialog {
background: #fff;
position: fixed;
padding: 12px;
top: 20%;
left: 50%;
z-index: 10000;
border-radius: 5px;
box-shadow: 0, 0, 8px, #111;
}
Try:
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
It will arrange your modal and then give it an vertical scroll
This is what fixed it for me:
max-height: 100%;
overflow-y: auto;
EDIT: I now use the same method currently used on Twitter where the modal acts sort of like a separate page on top of the current content and the content behind the modal does not move as you scroll.
In essence it is this:
var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
marginRight: scrollBarWidth,
overflow: 'hidden'
});
$modal.show();
With this CSS on the modal:
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Pure JS version (IE9+): https://jsfiddle.net/0x0049/koodkcng/1/
This works no matter the height or width of the page or modal dialog, allows scrolling no matter where your mouse/finger is, doesn't have the jarring jump some solutions have that disable scroll on the main content, and looks great too.
Change position
position:fixed;
overflow: hidden;
to
position:absolute;
overflow:scroll;
Here is my demo of modal window that auto-resize to its content and starts scrolling when it does not fit the window.
Modal window demo (see comments in the HTML source code)
All done only with HTML and CSS - no JS required to display and resize the modal window (but you still need it to display the window of course - in new version you don't need JS at all).
Update (more demos):
Modal window aligned to top
Centered Modal window
Old demo that use Javascript
The point is to have outer and inner DIVs where the outer one defines the fixed position and the inner creates the scrolling. (In the demo there are actually more DIVs to make them look like an actual modal window.)
#modal {
position: fixed;
transform: translate(0,0);
width: auto; left: 0; right: 0;
height: auto; top: 0; bottom: 0;
z-index: 990; /* display above everything else */
padding: 20px; /* create padding for inner window - page under modal window will be still visible */
}
#modal .outer {
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
width: 100%;
height: 100%;
position: relative;
z-index: 999;
}
#modal .inner {
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
width: 100%;
height: auto; /* allow to fit content (if smaller)... */
max-height: 100%; /* ... but make sure it does not overflow browser window */
/* allow vertical scrolling if required */
overflow-x: hidden;
overflow-y: auto;
/* definition of modal window layout */
background: #ffffff;
border: 2px solid #222222;
border-radius: 16px; /* some nice (modern) round corners */
padding: 16px; /* make sure inner elements does not overflow round corners */
}
simple way you can do this by adding this css
So, you just added this to CSS:
.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}
and it's working!
fixed positioning alone should have fixed that problem but another good workaround to avoid this issue is to place your modal divs or elements at the bottom of the page not within your sites layout. Most modal plugins give their modal positioning absolute to allow the user keep main page scrolling.
<html>
<body>
<!-- Put all your page layouts and elements
<!-- Let the last element be the modal elemment -->
<div id="myModals">
...
</div>
</body>
</html>
Here.. Works perfectly for me
.modal-body {
max-height:500px;
overflow-y:auto;
}
position:fixed implies that, well, the modal window will remain fixed relative to the viewpoint. I agree with your assessment that it's appropriate in this scenario, with that in mind why don'y you add a scrollbar to the modal window itself?
If so, correct max-height and overflow properties should do the trick.
In the end I had had to make changes to the content of the page behind the modal screen to ensure that it never got long enough to scroll the page.
Once I did that, the problems I encountered when applying position: absolute to the dialog were resolved as the user could no longer scroll down the page.
Window Page Scrollbar clickable when Modal is open
This one works for me. Pure CSS.
<style type="text/css">
body.modal-open {
padding-right: 17px !important;
}
.modal-backdrop.in {
margin-right: 16px;
</style>
Try it and let me know
I wanted to add my pure CSS answer to this problem of modals with dynamic width and height. The following code also works with the following requirements:
Place modal in center of screen
If modal is higher than viewport, scroll dimmer (not modal content)
HTML:
<div class="modal">
<div class="modal__content">
(Long) Content
</div>
</div>
CSS/LESS:
.modal {
position: fixed;
display: flex;
align-items: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: #qquad;
overflow-y: auto;
background: rgba(0, 0, 0, 0.7);
z-index: #zindex-modal;
&__content {
width: 900px;
margin: auto;
max-width: 90%;
padding: #quad;
background: white;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
}
}
This way the modal is always within the viewport. The width and height of the modal are as flexible as you like. I removed my close icon from this for simplicity.
How can I make a block filling the full width of its container given the fact both are absolutely positionned, and the inside one has padding.
I've made a JSFiddle:
http://jsfiddle.net/dmdBB/
here a sample:
<style>
.containerOut {
position: absolute;
width: 400px;
height: 400px;
border: thin solid black;
}
.containerIn {
position: absolute;
outline: 1px solid red;
width: auto;
padding: 4px;
}
</style>
<div class="containerOut">
<div class="containerIn">
im not large enough
</div>
</div>
In this sample, the .containerIn element is too thin. If I set its width to 100%, it would overflow because of its padding.
PS: I would like a CSS solution, I know that placing an intermediate HTML container with 100%width and 0margin/padding/border would solve the problem.
Instead of using width: 100%, you need to use left: 0; right: 0.
To fix the last example, you can use word-wrap: break-word.
See: http://jsfiddle.net/QjdD5/1/
.containerIn {
width: auto !important; /*just to override your inline CSS */
left: 0;
right: 0;
word-wrap: break-word
}
right:0px;
left:0px;
overflow:hidden;
for the inner element and if you dont want that red border showing on the black border you can use overlfow:hidden for outer div
#biab; padding & border add width to an element.
may be you can put in your css:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
http://jsfiddle.net/sandeep/dmdBB/28/
replace...
width: auto;
with...
left:0;
right:0;
Tested on chrome
I set a div's width to 100% of the window. When I apply a border to this div, the right border is cut off. Do I have to perform a box model hack to this?
#textBoxContainer {
width:100%;
height:30%;
position:fixed;
z-index:99;
bottom:0px;
left:0px;
background-color:#999;
border: 4px solid #000;
}
<div id="textBoxContainer"></div>
Already has been answered, but I like this solution better. Add this to textBoxContainer:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
It will put the border on the inside of the box. More info: http://css-tricks.com/box-sizing/
Edit - Doesn't work on IE7, but not much does. Here's more on that: box-sizing support in IE7
The easiest fix in your case is this:
#textBoxContainer {
height: 30%;
position: fixed;
z-index: 99;
bottom: 0;
left: 0;
right: 0;
background-color: #999;
border: 4px solid #000;
}
<div id="textBoxContainer"></div>
Live Demo
Remove width: 100%.
To make the div fill the screen, instead add right: 0.
It's perfectly viable to give an element both a left and a right (or a top and a bottom), like we're doing here.
Somewhat related firefox bug
A 100% select dropdown will often be missing its right border (dependent on width of window)
https://bugzilla.mozilla.org/show_bug.cgi?id=924068
No workaround other than to try width: 99%