I'm using bootstrap grid system,
While I'm scrolling to the right side of the window a white space appears:
I defined the body on width: 100vw;
How can I remove this space?
Even though we don't have any of your code, I can make a small guess. I had this problem before and this seemed to fix my problem. Try it out.
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
Ok, so I have a mobile application with Cordova and AngularJS. For the styling I use Less and Bootstrap.
Problem
In the mobile app I have tried to size my divs with percentage (%). But this does not seem to work. I cannot seem to change the following behavior: The divs are as big as the content inside of them. This problem sounds quite easy and I have tried many options on here (stackoverflow) aswell as on the web. Yet I have not found the solution to fix it and it is getting quite annoying.
I have tried
Adding html, body { height: 100% },
Adding html, body, #canvas { height: 100%}
Adding #canvas { min-height: 100% }
Adding html { height: 100% } body { min-height: 100% }
And a lot of other variations. Using px works, but I don't know how big my mobile device is, so that isn't realy handy.. (I also use bootstrap and some media queries for styling).
Example
When I add elements to my div I get the following behavior:
I want to remove that white empty space, but I can only achieve that when using px instead of %.
Less example:
html, body {
background: transparent;
height: 100%;
margin: 0;
padding: 0;
}
#canvas {
min-height: 100%;
}
body {
-webkit-touch-callout: none; //prevent callout to copy image, etc when tap to hold
-webkit-text-size-adjust: none; //prevent webkit from resizing text to fit
-webkit-user-select: node; //prevent copy paste, to allow, change 'none' to 'text'
min-height: 100%;
margin: 0;
padding: 0;
background-color: #cgiColor;
}
.header {
top: 0px;
width: 100%;
height: 5%;
background: #companyColor;
color: #textColor;
}
.incidentContainer {
background: #appBodyColor;
width: 100%;
height: 70%;
}
.footer {
position: absolute;
color: #textColor;
bottom: 0px;
height: 15%;
width: 100%;
background: #companyColor;
}
Extra information
I am using AngularJS, so my application is a single page application. My index.html looks as follows:
<body oncontextmenu="return false" >
<div class="{{ pageClass}}" ng-view ></div>
<script type="text/javascript" src="cordova.js"></script>
<script data-main="main" src="lib/require.js"></script>
</body>
With of course the standard links to my CSS sheets, and so on.
All the other pages are includes in the 'ng-view' and don't have any or tags. This because they are included.
Solution
The solution was to add the following CSS rule:
div[ng-view]{
height: 100%;
}
This worked, because all divs (except for html & body) are children of this item. Adding the 100% made the div space span to 100% of the screen and thus provides a space for percentage to work.
Credits go to Jai for this answer!
Have you tried to add the following css and set Important attribute
html, body { height: 100% !important }
What seems to me, the directive ng-view is the parent of your application and header, content, footer are loaded in this div. So you have your header div at correct place, your footer is also placed correctly as it is absolutely positioned.
But in case of your content area, that is relative to the ng-view div.
I would recommend you to make it 100% height. Something like:
div[ng-view]{
height: 100%;
}
This most likely is because of the fact that in CSS the 100% is a relative value.
With width the default 100% is the width of the screen, or whatever you are looking at.
Height however does not take the height of the screen as 100%. It needs a solid value.
I think that if you change
html, body {
background: transparent;
height: 100%;
margin: 0;
padding: 0;
}
with
html, body {
background: transparent;
height: 100vh;
margin: 0;
padding: 0;
}
it should work.
The 100vh should set the height of the html to the height of the viewport.
I guess this way works, I have to say though that I myself have not used something to get my page to have a height that is 100% of the screen.
Yay, rendered HTML!
class="incident" is only expanded as large as it needs to be. I believe your fix should be to make that element have a height of 70% (because it will be relative to the whole-page) and then incidentContainer should have a height of 100%.
Percentage heights are relative to the parent element, not the root, so you need to be very aware of any containers, even ones stealthily added by a framework.
Also, if it helps, Jelmergu suggested the vh unit type. This could fit your use case - one "Viewport Height" is equivalent to "1% of the browser's content area". So, 100vh would take up the whole screen. This is true even on deep-level children.
Okay so usually I can fix this myself but I'm stuck. I have been trying and trying and I just can't get my website to stay normal when I am resizing the browser window. I added a div that holds everything inside it and named it "bodycontainer". Here's my website: http://avosinc.com/new/
Here's the style I have for it:
#bodycontainer {
margin: 0;
min-height: 300px;
padding: 0;
width: 1000px;
}
And still, it doesn't want to stay put.
Please help me out!
your using px they are not responsive just static.. try using % as that will scale down with it.
#bodycontainer {
margin: 0;
height: 100%;
padding: 0;
width: 100%;
}
When viewing my client's site on a smartphone (https://50965.thankyou4caring.org/), the white background div doesn't stretch down the full length of the page.
Even when viewing the page in Google Chrome's inspect tool emulating a smartphone, I see the same problems.
The Div IDs in question are wrapContentOuter and wrapContentInner
I've read that using the following code should work:
body, html{
height:100%;
}
However, after testing it out in several of the stylesheets linked to the page, I've been unable to find which stylesheet to apply this code to and make it work. I've removed all tests and the CSS remains as it was when I started this job.
Am I missing something? Any advice or help is greatly appreciated! Thanks in advance, and please let me know if I'm missing any details.
Try this kind of code : http://jsfiddle.net/nyitsol/8abj8sLL/
The footer will always go down.
I can see you are using a min-height for the #contentPrimary which you don't need.
#contentPrimary {
float: right;
width: 650px;
margin: 0;
min-height: 400px;
}
The min-height should be 100%
EDIT:
Try this code now, just replace the class with this css.
#wrapFooter .gutter {
padding: 0;
width: 980px;
margin: 0 auto;
}
/*sticky footer*/
#wrapFooter {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
/*No Background Color Need*/
#BodyId, #internal {
/* background-color: #7B7670!important; */
}
One of the sites I'm designing breaks like this, when I resize it. Why doesn't it stick to browser's edges? How can I accomplish this?
I used CSS Layout Generator to generate the layout initially. I used the liquid layout option since I wanted to make my site responsive.
Within the <body> there's a wrapper <div> which is styled like so:
min-width: 320px;
max-width: 100%;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
The wrapper contains all the header, middle-section and footer which inherits from the wrapper's width. They have the max-width set to 1200px and is centered.
You need to remove the User Agent styles for the left and right padding on body:
body {
padding: 0;
min-width: 320px;
max-width: 100%;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
See this fiddle. If you change the selector .incorrectruledisabled to .incorrectrule, you should see the results you are getting in your attached image.
You can't give something an upper limit on its width and also expect it to occupy the full width unconditionally. Please let me know if I am misunderstanding your question.
EDIT: Here is an example where the contents of the header, middle and footer are centered, using text-align, but they themselves are not.