I am working on a fixed width page using bootstrap and I noticed when testing it on iPhone the full width header and footer background were clipped to 70% of the width.
It's Business marketing type site, frequented by people looking for a supplier, normally from their office PC so the responsive aspect was not a requirement but I digress.
Back to the problem
Viewing on a full size screen it looks as it should but if you scroll smaller than the limits of the container class (940px in this case) and then scroll back a little you can see the background has trimmed.
I have been tinkering with it for a while to the point where I have stripped everything out and just put in a simple bunch of nested divs to test and make sure the issue is not some rouge tag but it still does exactly the same thing.
I think the issue is related to items that are not wrapped in the class of container but if I need a full width panel and 940px fixed content I am not sure how I am going to achieve it with bootstrap.
// This Fails
<body>
<header class="fullwidth">
<div class="container">
<p>The content</p>
</div>
</div>
</body>
// This is fine but not full width
<body>
<header class="container">
<p>The content</p>
</header>
</body>
I have not adulterated bootstrap if I remove it or my styles together and restyle the body manually it goes away. But it seems to be a cumulative issue...
Anyone come across this before?
I don't really want to have to strip bootstrap out if possible.
As requested I have appended the link:
http://jsfiddle.net/NcZFz/3/
If you notice in jsfiddle whatever size your viewport is the header will fill it, but the view port only. And if you are using a MAc and have a magic mouse (or whatever) you can scroll right in that view port to see white. But this is supposed to be edge to edge so there should be no white.
It appears you have a margin on the <ul id="menu-primary-navigation">
#menu-primary-navigation { margin-left: 0; }
And you should also put .clearfix on the same element (because children are floating)
<ul id="menu-primary-navigation" class="clearfix">
Check this working jsfiddle.
All the above fixes could be avoided if you used the .navbar .nav classes (and associates) : read the doc.
Related
I'm creating an HTML page which is comprised of two sections; header and body. Rather than use a position:fixed header and allowing the whole page to scroll, I have used a normal header and made the body a scroll container. This is because there are fixed/sticky elements in the body which need to stick to the bottom of the header (and also due to problems with dynamic sizing of the header and body). The problem is that we have various UI elements which appear smooth across the header/body boundary. Our application's layout is responsive to screen size, and now the body may have a scrollbar, but the header doesn't, so they don't quite line up.
I have fixed this problem by having the body elements have a reduced width, and then using a position:absolute background div at the end, to overlap where the scrollbar would go, with the same background colours as the main UI element so they appear to be part of it. This means the header and body would keep a consistent width regardless of scrollbar.
The basic issue with this solution is that when the vertical scrollbar is shown, the browser also shows a horizontal scrollbar so that the user can "see" my placeholder background div, even though it doesn't occupy any of the width. I've tried a few different values for stuff like overflow, etc, but what it really boils down to is that none of them can show the placeholder divs when the scrollbar is not present without making a mess when it is present. There doesn't seem to be a CSS property for when the scrollbar is shown so that you can change the CSS as needed.
I've looked at e.g. scrollbar-gutter but we can't really use this as we need to continue supporting Chromium 88 as well as Firefox, iOS Safari, and similar. overflow:overlay would be ideal but isn't a well supported feature.
Some have suggested a mix of position:relative and position:fixed, but if I apply the right styles to get the element into the right place when there is no scrollbar, then it still causes the same issue when there is one.
Please see the following snippet (I tried the inbuilt one but it doesn't seem to work super well with content that requires scrollbars and such). I've created simple fixed-height divs to demonstrate the different content that I'm dealing with right now. The blue boxes should appear to go all the way across but don't need interaction right on that last bit. The red and green boxes should always line up, even though their layout is width-dependent and only the bottom section of the page scrolls if you shrink it down. These goals are achieved but when you shrink the page so that the vertical scrollbar is needed, the horizontal scrollbar also appears.
<html>
<head></head>
<body style="height:100vh;display:flex;flex-direction:column;margin:0">
<div style="height:200px;flex-shrink:0; max-width:calc(100vw - 17px)">
<div style="height:100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
<div style="height:100px;background:red;margin-left:200px; width:50%"></div>
</div>
<div style="flex-grow: 1; overflow: auto;">
<div style="max-width:calc(100vw - 17px)">
<div style="height: 100px;background:green;margin-left:200px; width:50%"></div>
<div style="height: 100px;background:blue; width:100%; position:relative">
<div style="position:absolute;width:17px;right:-17px;height:100%;background:blue"></div>
</div>
</div>
</div>
</body>
</html>
So what I am trying to do is reproduce this effect (which can be seen using chrome Version 45.0.2454.101 m). The important thing to notice is that each div is displaying a piece of the overall background image in the wrapper (except it is actually a separate image of the same size that is modified by inverting the colors so you can see the difference).
Basically it appears as though each content div is using a background image that is the size of the document itself.
Structure:
<div class="wrapper">
<div class="content">
Here is some content
</div>
<div class="content">
Here is some more content
</div>
<div class="content">
So much content
</div>
</div>
However, if you were to go visit this link on your mobile device you'll notice that now each div is using its own background image and not overlaying with the wrapper's background image. The background image is now the same size of the content div and is positioned per content div. Why is this happening and how can I get the mobile website to look like the one experienced in a desktop browser? (I am also using chrome on mobile)
Link to JS Fiddle
Kudos for the effort, but this is simply not going to work as it depends on background-attachment:fixed. Mobile browsers try to actively improve the view experience by 'intelligently' handling certain page content differently, especially when it seems desktop-optimized.
One of the things they choose to do is ignore things like background-attachment:fixed, because usually it breaks more than it enhances on not-so-intelligently designed pages on a miniature screen.
So I'm sorry but http://caniuse.com/#feat=background-attachment is your problem here, and it's not going away soon :)
I'm working on a website which is working perfectly on every browser except firefox. In firefox extra space is added at the end and an extra vertical scrolling is there. My website is hosted here. Can anyone please tell me whats going wrong.
The I frame could be causing it. If you add
Style="position:fixed;"
in a div serving as the back ground like this
<html><head><title>your title</title></head><body>
<div Style="position:fixed;" name="entire web page">
<p><h1>HI and welcome to my world</p>
<div>some content...</div>
</div>
You might also add it to any "big" items like large pictures
it will also help if to make sure all of your appending** height percentage add up to no more than 100% trying to display 140% of a screen means it needs a scroll bar. a have had this trouble me for days before. **Any object that is stacked on top of another.
I'm developing Chrome plugin. I would like to implement its interface as line with content that will be displayed before site content starts (similar to stackoverflow information bar). I'm not good at HTML and CSS.
1. How can I implement it to work correclty at any site?
2. What HTML code is best to use to make rectangle that will be correctly displayed at top of any site?
1- Make sure the HTML you inject is right after the Body Tag.
2- With CSS, put it Width 100%; position: fixed (it is always on the top of the browser) or position: absolute (always on the top of page); top:0; z-index: 999 (its always on top)
(Some minor adjustments might be to do, Its off the top of my head)
3- Aim for the first element after your bar (should be a container) and apply it a margin-top of the height of your added element.
Should create a bar on top where you can put any thing you want.
The simplest way to do it is to just add a <div> to the beginning of the body:
<!-- old -->
<body>
<div id="header">
<h1>Hello, world!</h1>
<!-- ... -->
<!-- new -->
<body>
<div>Your content goes here.</div>
<div id="header">
<h1>Hello, world!</h1>
<!-- ... -->
Because the <div> is a block-level element, it should stretch across the screen by default, and then you can style it however you like.
However, there are two basic problems:
The site's CSS interferes with your bar. This could show up in the form of styles that you make sure you declare, so that your bar doesn't look funny. Or it could mean that some elements on the page were positioned absolutely, and you adding the bar breaks the layout.
The site's JS interferes with your bar. If the site itself dynamically adds elements to the beginning of the <body>, then your bar will be pushed down the page. What if the JS selects all the <div>s on the page, and fades them out?
I'm fairly new to web development, but I just realized something when designing some new headers/footers. When you wrap them in a container with a background image/color that stretches across the page, then shrink the window of the webpage to be smaller than the intended width, and then scroll across to view the content that you can't see in your smaller window, the background image container is no longer large enough (as it resizes to the width of the window automatically, even though the content in it overflows), and you see whitespace instead of the background image.
Take the homepage at http://www.stumbleupon.com for example. Shrink the window, then scroll to the right. All of a sudden ALL of their background images are gone. Header, body, everything. Just content on top of the flat, default color.
Is there a solution to this? Is this just ignored in web design as an irrelevant concern? It seems fairly relevant to me, especially when doing things like viewing multiple tabs/windows at one time, or if someone is (god forbid) using a monitor with a resolution width smaller than 1024.
StumbleUpon have just been careless with container divs. They've set a container div with a width of 100% and then the header div inside that is set to 100% of that.
<div id="container" style="width:100%">
<div id="header" style="width:100%">
Header Content
</div>
</div>
The container div stretches to the visible window width. The sub-div then only stretches to that divs width. If you put the header outside of the container div it will stretch to the full width of the page.
<div id="header" style="width:100%">
Header Content
</div>
<div id="container" style="width:100%">
</div>
See my homepage: http://smallhadroncollider.com for an example of full width headers.