I'm making a patatap.com website clone for learning purposes. I want the site to take exactly 100% of the available screen height. There is no more content so no scrolling is needed. I'm using the 100vh CSS property for this:
body, html {
max-height: 100vh;
margin: 0;
}
This is the current version of the website:
http://patatap-clone.hexagonwebdev.vxm.pl/ (press any letter or number on keyboard to use it's functionality).
It is OK on Windows 7 on Internet Explorer and Firefox, but on Chrome (latest version - 70.0.3538.102) the site takes more than full screen and I can scroll down a bit.
It is bad on Ubuntu - on Chromium and Firefox around 30% of site is not visible (this laptop has smaller resolution).
Is there a better way to achieve the "non-scrolling" and 100% height goal? I have tried max-height: 100% and !important properties but that did not help.
Content will force just about anything to get bigger if you haven't set overflow properties. Conversely, setting max-height doesn't make the content bigger so the height will be the content height up to the max-height.
Finally, try not to set the height of the body/html tags. Those are "special" tags that don't function the same way other elements do.
Instead, create a container that is the full size of the screen.
/* normal div */
.container {
display:block;
height: 100vh;
overflow:hidden;
background: black;
}
/* or absolutely positioned div */
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow:hidden;
background: black;
}
Related
<div id='wrapr'>
...
</div>
CSS
body{
max-width:1366px;
}
#wrapr{
position:fixed;
right:14px;
top:30px;
}
I just want #divr to bi fixed i.e. not scrollable on page.
But on a large screen (1920 px for example) it is placed outside of my bodytag !
How can I keep it fixed, but inside the body ?
A good rule of thumb for modern web development is to avoid px measurements at all costs. em, ch, vh/vw, and percents will generally provide a much better experience for users across a wide range of devices, aspect ratios, screen resolutions, etc.
body {
max-width: 100vw;
}
#wrapr {
position:fixed;
right: 1em;
top: 2em;
}
Sometime also to watch out for is for children elements which do not respect their parents max width. You may need to write CSS for these elements to ensure that they never grow larger than their parents.
#wrapr .someChildClass {
max-width: 100%;
}
For debugging this sort of thing, I find it extremely helpful to utilize Chrome DevTools. If you select the element you are interested in, it will show the entire box model including margin, content size, padding size, etc. in the style panel.
Finally, if you just want to truncate content, you can turn overflow off to prevent scrolling.
body {
max-width: 100vw;
overflow: hidden;
}
#wrapr {
position:fixed;
right: 1em;
top: 2em;
}
I would like to have my menu bar across the entire screen, currently it is in the middle with white space on either side. I would like the bar to be stretched along the top of the page but for it to not "hover". I have tried the position:fixed and that has achieved the look of the menu that I want however I don't want the menu bar to be fixed to the top of the screen as the reader scrolls down the page. The URL to my blog is as follows : http://www.blankesque.com and I have included the css coding for the menu bar below :
#topdropcont {
width:100%;
height:45px;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position:absolute;
background:#f5f5f5;
}
Change position:absolute; to position: fixed;
The other option is running the following jQuery script that calculates the width using JS
$("#wctopdropcont").css('left',($(document).width() - 1080) / 2 * -1).width($(document).width());
Best I can tell (and assuming I understand how you want your page to look), the problem isn't in your topdropcount, it's in your content-outer, which appears to specify a space that's 1080 pixels wide.
If you dont want a fixed header you have to change the position attribute of div.content-outer & .fauxborder-left to position: static (actually relative).
The problem here is you're using a relative width (100%) inside of a defined width container (.content-outer{1080px;}). You can see how this works by adding a larger relative width to your #topdropcont. (e.g. #topdropcont {width: 120%;}).
You can easily solve this by moving the markup of the menu outside of that container.
Just like #Matthew Darnell said your class content-outer has the following css styles min-width: 1080px and max-width: 1080px so having a width of 100% on your menu will give it a width of 1080px. If you don't want to move your menu outside of countent-outer, you can make the following changes to your css:
1) Remove min-width: 1080px and max-width: 1080px from .content-outer
2) Add min-width: 1080px, max-width: 1080px and margin: 0 auto to your header tag and to .main-outer
This should solve your issue.
Since first parent element of the Menu that has 100% width is .content, make sure it has position: relative, than make sure all other parent Menu elements have no position set. Than you can set your menu container to absolute positioning.
Final CSS should be:
.content {
position: relative;
}
.content-outer {
/* REMOVE: position: relative; */
}
.fauxborder-left {
/* REMOVE: position: relative; */
}
#wctopdropcont {
position: absolute;
/* Fading script should be removed...
it changes opacity and display, so: */
display: block !important;
opacity: 1 !important;
}
What you get after is this:
What I want
two div : A page body (1) and a background block (2)
background block is always (2560 x 780) px
page body width is 820px while height is variable
background block should be behind page body
background block and page body should both be centered
background block should not move relatively to page body when resizing the window (even by 1 pixel !)
no horizontal scroll bar should appear for background block
background block position isn't fixed
Constraints
no JS
CSS2 preferred
What I tried
Page body CSS:
#pageBody {
width: 820px;
margin: 0 auto;
}
Background block CSS:
1. A full-page div which displays a CSS centered background
<div id="backgroundBlock"></div>
<div id="pageBody">
</div>
#backgroundBlock {
background: no-repeat center 0 url(bg.png);
width: 100%;
height: 100%;
position: absolute;
}
But when the window's size is odd:
the CSS background is shifted by 1 pixel on the left
background image appears blurry on Internet Explorer
2. A repositioned child div
make background block a child of page body (which is centered)
make background block positioned absolute (to put it behind page body)
use negative margins to reposition the background block
make background block overflow: hidden to prevent the scroll bar from appear for that div
<div id="pageBody">
<div id="backgroundBlock"></div>
</div>
#backgroundBlock {
background: no-repeat url(bg.png);
width: 2560px;
height: 780px;
position: absolute;
margin: 0 0 0 -870px;
overflow: hidden;
}
But problem: the scroll bar appears for the background block...
Here are a few ideas I could think of, with their issues. However, I could not reproduce the "blurry in IE" issue, so I don't know which solution have it or not.
I did put "Extra markup" as an issue for solutions including a div (#backgroundBlock) only used to display the background image, as it is not semantic.
Solution 1 (jsfiddle)
Description : Your first solution
Issues :
Extra markup
On Chrome, depending on the page size, pixels can be aligned differently. You can see it on jsfiddle near the right border :
Solution 2 (jsfiddle)
Description : Multiple-backgrounds on body. #backgroundBlock div not needed.
body {
background: no-repeat center top url(bg.png), url(bodybg.png);
}
Issues :
Not compatible with old browsers (IE8, FF3.5, ... ; source)
On Chrome, same alignment problem as in solution 1
Solution 3 (jsfiddle)
Description : Use of translate. No more pixel alignment errors.
#backgroundBlock
{
background: url(bg.png);
width: 2560px;
height: 780px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
Issues :
Extra markup
You have to use overflow-x: hidden on body to avoid horizontal scrollbar
Not compatible with old browsers (IE8, FF3, ... ; source). You should also use prefixes for compatibility (-webkit-, -moz-, ...). I did not add them to keep the example simple
Solution 4 (jsfiddle)
Description : Use of translate and ::before. Alternative version of solution 3. Pseudo-elements compatibility are not an issue here since every browser supporting 2D-tranforms supports ::before (source).
#backgroundBlock
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#backgroundBlock:before
{
content: '';
background: url(bg.png);
width: 2560px;
height: 780px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
Issues :
Extra markup
Not compatible with old browsers (IE8, FF3, ... ; source). You should also use prefixes for compatibility (-webkit-, -moz-, ...). I did not add them to keep the example simple
There are other possibilities but I think most of them would have one of the above issues.
For example, you could set the #pageBody width to 2560px, set the background on it, add padding to have a content size of 820px and translate it in order to have it centered on the page (and prevent horizontal scrollbars using overflow-x on body). This would be possible because the background image and page body both have fixed width.
I'm trying to make extensible sidebars to the full document height without Javascript. I started to wrote some code to make this happen, but however, both div height are not extending after the viewport size.
Here is a small codepen of what is my problem http://codepen.io/anon/pen/bpAzo. As you can see, if you scroll down, height of both sidebars are just set to viewport size which is weird because i set both body, html, #sidebars to height: 100%;.
Is there a way to extend to full page height without using Javascript ?
Thank you.
You just set your sidebar height to 100% which gives it just a 100% of current browser size. Remove the height of your sidebar and remove also the html and body code.
#sidebar {
position: absolute;
top: 0;
width: 100px;
color: green;
color: #FFFFFF;
}
.left {
background-color: blue;
left: 0;
}
.right {
background-color: red;
right: 0;
}
DEMO HERE
http://codepen.io/anon/pen/jfEhH
If you set html and body to 100% height it will just be 100% of the window ( it's parent ) size. You need to set a specific height ( 3000px ) or 200% for example, which will be 2 times the windows height.
Body tag on codepen by default have margin. Without margin all looks good.
http://codepen.io/suez/pen/zJhne
But in the future, i will reccomend you to use overflow: hidden; on body (combined with margin: 0), this will provide 100% confidence that all of your content always will be inside viewport (without any scrolling).
Edited: if you want to use more than 100% of viewport height for your site, then you need to use position: fixed; on sidebar.
Just make the "height" attribute in your CSS style sheet to "auto", like as follows,
sidebar {
position: absolute;
top: 0;
height:auto;
width: 100px;
color: green;
}
Don't worry about "sidebar.right" ,as u will see no red color on right side of your page. It will automatically show up when you add up some content to it or just add few <br /> tags.
Is it possible to change the height of an HTML element when the viewport resizes with pure CSS? It's hard to explain the problem, but I'm still going to try:
What I want, is a page with a header, content and a footer, like most webpages. As I'm working with a 1920x1080 monitor, I'm using that as my standard. The problem however is that not everyone is using a 1080p monitor. Some are using the older standard, 1280x1024 or using a tablet where the height can be 2560px (I'm not doing smartphones, as they will have a completely different design due to the small screen width). On my page I have images, covering a fixed width. If this width is greater than the width of the viewport, the images will be displayed underneath each other:
(Right-click on the image and select "show image" to view at full size)
As you can see in this image, when the viewport is smaller, the images will stack and will fall from the background. The 'Follow me on:' section even felt of entirely. What I want to do is, when this happens, to make the content div larger, so all of the content stays on the page. I know this is possible using height: auto, but when you do that, the fixed height of the footer will follow after it, and on a screen with a large height, there might be a white border because the document height is smaller than the viewport height.
Take some time to learn min-width, min-height, max-width, max-height, (css attributes) and device-width, device-height (css default values of the client viewports). I can not guarantee they would refresh while you drag/resize the browser window or viewports in devices, but I think they help your style rules.
It's slightly unclear to me what your end-goal is with this so I did my best interpretation. If it's not what you're looking for, give me a good mental image of what you're trying to do and I'll try to correct it.
Live Demo
CSS:
html, body {
box-sizing: border-box;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#wrap {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
}
#header, #content, #footer {
position: absolute;
width: 100%;
}
#header {
top: 0;
height: 70px;
background: lightblue;
}
#content {
overflow-y: auto;
top: 70px;
bottom: 70px;
background: limegreen;
}
#footer {
bottom: 0;
height: 70px;
background: purple;
}
HTML:
<div id="wrap">
<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>