My own page doesn't have a scroll bar, no matter what I do, minimize or zoom in/out. It just doesn't appear, I've tried FF, Chrome and IE: all no. Other internet pages are fine. Here is the body element and css:
<body>
<div class="container" id="page">
The CSS is like:
html, body
{
margin: 0;
padding: 0;
color: #555;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #EFEFEF;
overflow: scroll;
}
#page
{
margin-top: 5px;
margin-bottom: 5px;
background: white;
border: 1px solid #C9E0ED;
}
PS: I'm using YII framework.
UPDATE:
IT seems YII has some default css settings, in screen.css the div container is mentioned three times as follows:
.container {width:1250px;margin:0 auto;}
.container:after
{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.container {display:block;}
I changed overflow:hidden to overflow:scrollbut still didn't work.
In order to see a scroll you'll have to define a height and or width in which creates a scroll. Not being able to see if you have content or what your mark-up is like -- declaring at the HTML or body tag will do the trick.
html, body
{
margin: 0;
padding: 0;
color: #555;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #EFEFEF;
overflow: scroll;
height: 1000px; // toggle
width: 100% // toggle
}
#Evelyn1986
Force some width and it'll come up.
Try width:805px;
overflow:auto;
Then just have some content, that's 'big'
please add height on body tag..and add content more than what value you are give on height property....
body
{
margin: 0;
padding: 0;
color: #555;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #EFEFEF;
overflow: scroll;
height:100px;
}
Fiddle : http://jsfiddle.net/nikhilvkd/rVd4M/
Related
I have a problem that I just can't wrap my head around, it might be because that I'm tired. I'm using Ryan's Fait sticky footer which I'm sure the most of you are familiar with. I use it regularly and never had any problems with it until now. The design that I'm working has a footer with several inner child elements.
One of the elements .newsletter is using padding or margins to make a wide gap so that a background image can be placed on the body. This is causing a overflow even when entering the correct height. Deleting the padding corrects the problem. I know that using overflow: hidden is an option but I'd rather find out the cause.
Screenshot with margins or padding set within the news letter element:
Screen without margins or padding set in the news letters:
Not working CSS:
body {
background: #212121;
color: #ddd;
padding: 0;
margin: 0;
font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
cursor: default;
height: 100%;
}
.maincontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -424px;
width: 100%;
}
.mainfooter, .push {
height: 424px;
width: 100%;
}
.newsletter {
padding: 1.875rem 0 1.875rem;
}
.newsletter-fix {
background: #000;
padding: 3rem 0 1rem;
color: #ddd;
}
Working CSS:
Simply changing the following values from those mentioned above to the following resolves the issue but I want the padding, or margin gap between the newsletter.
.maincontainer {
margin: 0 auto -394px;
}
.mainfooter, .push {
height: 394px;
}
.newsletter {
padding: 0;
}
What if you put background-color : black to your .mainfooter instead of putting the background-color to the different element inside your footer?
It would seem that I'm extremely tried and stupid! I thank everyone for taking the time to take a look but it seems its as simple as a user error.
The problem was because I was counting from the very first bit of colour, in this case background: #000 on the .newsletterfix and not taking into consideration of the invisible padding above it. Stupid, me.
Example:
I'm making a fixed width (120px) website for old feature phones that don't respond to media queries. The width of the body won't change even when I've defined it as 120px. When I open the website on the phone, it shows a huge horizontal scroll bar showing me a lot of blank space on the right which I'm assuming is the body. In the screen shot attached, I've set background color of body to red so you can see the problem (I also had to blackout the content for client privacy).
I'm using the following code:
html {
width:120x;
margin-left:0px;
}
body{
width:120px;
font-family: arial;
font: arial;
margin-left: 0px;
max-width:120px;
}
I think you've a typo here:
html {
width:120x;
margin-left:0px;
}
The width should be 120px
Remove the typo:
html {
width: 120px;
margin-left: 0px;
}
I think you have to use un child to wrap your content with a max-width.
and tags don't allow to do what you want.
HTML
<div class="wrapper">
Your content goes here
</div>
CSS
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding: 20px;
width: 120px;
height: 100%;
font-size: 14px;
background-color: #d63b24;
color: #fff;
}
http://jsfiddle.net/vinzcelavi/1rx7yn57/
Try this
body {
min-width: 1024px;
}
Here's your fiddle: http://jsfiddle.net/enxRw/1/
I have my width for the status bar set to 100% in CSS, but yet it is still a little bit more. The rest of my page all cuts off at the right spot but you can scroll right and see my status bar sticking off. Please help! All help is appreciated!
Link to my site
CSS Code:
body{
margin: 0px;
background-color: lightgrey;
}
div.navigation{
width: 99%;
padding: 10px;
height: 25px;
background-color: black;
}
a.navigation{
color: #f5f5f5;
text-decoration: none;
font-size: 20px;
font-family: Century Gothic, sans-serif;
display: inline-block;
vertical-align: middle;
}
a.navigation:hover{
color: grey;
}
a.navigation:active{
color: darkred;
}
a.navigation:visited{
color: #f5f5f5;
}
In your CSS, you have some styles set on the navigation which are adding padding. Change the code starting at line 37 to:
div.navigation {
width:100%;
padding: 10px 0; /* Keeps the padding to the top and bottom only */
height:25px;
background-color: black;
}
Your padding is causing the browser to interpret the width of the bar as 100% of it's container width plus 20px of padding (10px left and 10px right).
You can use the CSS box-sizing: border-box; property to force the browser to render the box with the specified width and height, and place the border and padding inside the box.
div.navigation{
width: 100%;
padding: 10px;
height: 45px;
background-color: black;
box-sizing: border-box;
}
Note you will need to increase the height to 45px because the browser will not extend the height of the box for the top and bottom padding.
JS Fiddle fullscreen; code.
I'm using Less Framework 4 for two websites I'm designing. In both designs I want to apply a 5 pixel border both on top and bottom of the document.
The problem: because of the styles applied to body, I'm applying the border-bottom and border-top to the html object, so the bottom border never sticks to the bottom of the page like it would happen in a usual sticky footer situation.
Here are the screenshots for the two cases:
Here's the (LESS) CSS I'm using for html and body: pastie.org/private/us5x1vhjnwzq6zsiycnu2g
html {
border-top: solid #black 10px;
border-bottom: solid #black 10px;
background: url('img/bg.png') repeat;
}
body {
width: #8col;
margin: 0px auto;
padding: 100px 48px 84px;
background: #white;
color: rgb(60,60,60);
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
font: 13px/20px 'OftenRegular';
-webkit-tap-highlight-color: #green;
}
I've tried using height: 100% both for the body and html objects, but here's how it looks live: http://prikonline.be/prikactie/
How should I stick the border to the bottom of the page?
You could instead use a footer wrapper like this.
.footer {
position: absolute;
bottom: 0;
border-bottom: solid #black 10px;
width: 100%;
}
and just insert this right before </body> or somehting
<div class="footer"></div>
You can use position:fixed; and bottom:0px; to always, regardless of your scrolling state and content height, fix it to the bottom.
Try changing it to:
height:auto;
for your HTML CSS.
Hmmm... Putting min-height: 100% on the html element on your page (manipulating in Web Inspector) worked for me right away in Chrome; what are you testing in?
This approach does, however, go a little bit over 100% because of the height of the border, which you can correct for in IE8+/Gecko/WebKit with the CSS box-sizing property (use the value border-box).
For IE7 and IE6, if you care to make them render the same, it'd be pretty easy to write a little JavaScript that, on load or on resize, checks the window height, compares to document height, and if necessary forces the HTML element to the window height minus 20.
It looks like you're using some sort of dynamic stylesheet tool (like LESS). Usually the dynamic stylesheet tools let you use JavaScript. So you could define height as:
#height: `window.innerHeight + 'px'`;
And then add something like
body{
...
min-height: #height;
}
Of course, the problem with this is that if the user were to resize his/her browser window, the layout would not update appropriately. You could use the window.onresize callback to handle that.
Of course, you could use JavaScript to handle the whole thing. Granted, some vehemently oppose the use of JavaScript to do styling (separation of behavior, content, and style), when attempting things like a sticky footer, sometimes its easier to just write two lines of JavaScript than to try to come up with some clever CSS that may or may not work in every browser you're trying to target. If the user has JavaScript turned off, then the page just doesn't fill the whole height of the page on pages with less content.
window.onload = window.onresize = function(){
document.body.style.minHeight = (window.innerHeight-204) + "px";
// -4px for the border
// -200px for the padding on your body element
}
I do not advise you to apply CSS to html element. Instead create div with similar styles.
In general case your code sould be like this:
HTML
<div id="wrapper">
<!-- main content goes here -->
<div class="reserveSpace"></div>
</div><!-- #wrapper end -->
<div id="footer"></div>
CSS
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }
This works perfect in all browsers, even in IE6 :)
You can always implement this working sticky-footer CSS (I've added with inline social bar):
.sticky-bar {
background: #000000;
bottom: 0;
color: #D3D3D3;
font-weight: 300;
left: 0;
margin: 0;
opacity: 0.9;
padding: 0em;
position: fixed;
width: 100%;
z-index:99999;}
.sticky-bar-inner {
margin:0 auto;
text-align: center;
width:100%;
background-color: #D3D3D3;
padding: 3px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin:0 auto;
padding: 3px;
text-align: center;
width:100%;
font-size: 11px;
}
#footerlist {
padding-left:0;
}
#footerlist li {
display: inline;
list-style-type: none;
}
HTML:
<!-- Footer -->
<div class="sticky-bar">
<div class="sticky-bar-inner">
<p>©2015 The astrobox.io Project<p>
<ul id="footerlist">
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
</ul>
</div>
</div>
Just edit the hrefs to your own personal urls, and the image src to the social style images you want (or include the font awesome package if you have it).
Here is how I added a body border at the bottom:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
The key is min-height: 100vh, which ensures that body height will at least be height of the viewport. Because of box-sizing: border-box, border of the body will be accounted in the body height. There is still a problem of content margins pushing the border below viewport, but that can be fixed with an arbitrary padding-top value.
I'm using Less Framework 4 for two websites I'm designing. In both designs I want to apply a 5 pixel border both on top and bottom of the document.
The problem: because of the styles applied to body, I'm applying the border-bottom and border-top to the html object, so the bottom border never sticks to the bottom of the page like it would happen in a usual sticky footer situation.
Here are the screenshots for the two cases:
Here's the (LESS) CSS I'm using for html and body: pastie.org/private/us5x1vhjnwzq6zsiycnu2g
html {
border-top: solid #black 10px;
border-bottom: solid #black 10px;
background: url('img/bg.png') repeat;
}
body {
width: #8col;
margin: 0px auto;
padding: 100px 48px 84px;
background: #white;
color: rgb(60,60,60);
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
font: 13px/20px 'OftenRegular';
-webkit-tap-highlight-color: #green;
}
I've tried using height: 100% both for the body and html objects, but here's how it looks live: http://prikonline.be/prikactie/
How should I stick the border to the bottom of the page?
You could instead use a footer wrapper like this.
.footer {
position: absolute;
bottom: 0;
border-bottom: solid #black 10px;
width: 100%;
}
and just insert this right before </body> or somehting
<div class="footer"></div>
You can use position:fixed; and bottom:0px; to always, regardless of your scrolling state and content height, fix it to the bottom.
Try changing it to:
height:auto;
for your HTML CSS.
Hmmm... Putting min-height: 100% on the html element on your page (manipulating in Web Inspector) worked for me right away in Chrome; what are you testing in?
This approach does, however, go a little bit over 100% because of the height of the border, which you can correct for in IE8+/Gecko/WebKit with the CSS box-sizing property (use the value border-box).
For IE7 and IE6, if you care to make them render the same, it'd be pretty easy to write a little JavaScript that, on load or on resize, checks the window height, compares to document height, and if necessary forces the HTML element to the window height minus 20.
It looks like you're using some sort of dynamic stylesheet tool (like LESS). Usually the dynamic stylesheet tools let you use JavaScript. So you could define height as:
#height: `window.innerHeight + 'px'`;
And then add something like
body{
...
min-height: #height;
}
Of course, the problem with this is that if the user were to resize his/her browser window, the layout would not update appropriately. You could use the window.onresize callback to handle that.
Of course, you could use JavaScript to handle the whole thing. Granted, some vehemently oppose the use of JavaScript to do styling (separation of behavior, content, and style), when attempting things like a sticky footer, sometimes its easier to just write two lines of JavaScript than to try to come up with some clever CSS that may or may not work in every browser you're trying to target. If the user has JavaScript turned off, then the page just doesn't fill the whole height of the page on pages with less content.
window.onload = window.onresize = function(){
document.body.style.minHeight = (window.innerHeight-204) + "px";
// -4px for the border
// -200px for the padding on your body element
}
I do not advise you to apply CSS to html element. Instead create div with similar styles.
In general case your code sould be like this:
HTML
<div id="wrapper">
<!-- main content goes here -->
<div class="reserveSpace"></div>
</div><!-- #wrapper end -->
<div id="footer"></div>
CSS
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }
This works perfect in all browsers, even in IE6 :)
You can always implement this working sticky-footer CSS (I've added with inline social bar):
.sticky-bar {
background: #000000;
bottom: 0;
color: #D3D3D3;
font-weight: 300;
left: 0;
margin: 0;
opacity: 0.9;
padding: 0em;
position: fixed;
width: 100%;
z-index:99999;}
.sticky-bar-inner {
margin:0 auto;
text-align: center;
width:100%;
background-color: #D3D3D3;
padding: 3px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin:0 auto;
padding: 3px;
text-align: center;
width:100%;
font-size: 11px;
}
#footerlist {
padding-left:0;
}
#footerlist li {
display: inline;
list-style-type: none;
}
HTML:
<!-- Footer -->
<div class="sticky-bar">
<div class="sticky-bar-inner">
<p>©2015 The astrobox.io Project<p>
<ul id="footerlist">
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
</ul>
</div>
</div>
Just edit the hrefs to your own personal urls, and the image src to the social style images you want (or include the font awesome package if you have it).
Here is how I added a body border at the bottom:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
The key is min-height: 100vh, which ensures that body height will at least be height of the viewport. Because of box-sizing: border-box, border of the body will be accounted in the body height. There is still a problem of content margins pushing the border below viewport, but that can be fixed with an arbitrary padding-top value.