What I have seems to be a simple issue but I cant just wrap my head around it. I have googled around but all fixes for similar questions didn't help, which is why I'm asking for help here.
I am building a landing page with several sections stacked on each other. Each section is set to occupy the full height of the view port, and all except one is set to take up 100% width of the screen too.
However, when I reduce the screen height, the sections overlap each other. I have tried to set the overflow of each section to hidden, I still get the same behaviour. What I want is that each section be of fixed height as the browser height reduces and not get pushed into the upper section. Below is the snippet of my code.
body{
height: 100%;
width: 100%;
box-sizing: border-box;
}
.introd{
height: 100vh;
width: 100%;
padding: 3rem 4rem;
overflow: hidden;
}
<section class="introd">
<div class="introd_wrapper">
<h2 class="text-center">Introduction</h2>
<div class="contents">
some contents here
</div>
</div>
</section>
That's because of the padding of .section elements. To avoid the padding being added up to an element's width and height, set its box-sizing property to border-box like so:
.section{
height: 100vh;
width: 100%;
padding: 3rem 4rem;
box-sizing: border-box;
}
Also, you don't need to style the body just to make the elements stretch because each already has a width and height set.
Related
Here is the photo of the border of the body
As you can see the body is not at 100% height.
Here's the CSS codes of the HTML and Body
html{
height: 100%;
min-height: 100vh;
}
body{
height: 100%;
min-height: 100vh;
font-family: sans-serif;
min-width: 400px;
position: relative;
display: flex;
justify-content: center;
border: 5px solid black;
padding: 0;
margin: 0;
}
I tried putting the height of the html and body separately but it still didn't work. I tried searching and them saying make min-height and height at 100% or 100vh and so I did but it still didn't work. I think it is because those things that are over the body are overflowing from its container?
Edit: I forgot to add this but the reason why I want body to extend along with the overflow is because that left and right container is positioned as sticky. So I can't use overflow: hidden;
I can try putting the left and right container as position: fixed; but it does not take space so I have to resize everything and also I want to know what is happening so I can avoid this problem.
Here's the whole code
https://codepen.io/n01knowz/pen/qBpBapV
I'm new to CSS so I don't know if there's any writing problem there so please tell me what I can fix.
Update: Okay so the reason the body wasn't extending was because the container is overflowing and technically isn't getting any bigger and so the body isn't expanding because its child's height isn't expanding too. So that's the danger of using when you set the height of the container.
Solution: Just let the container's height be and let the child components of the container be the one to decide its height.
Add in the overflow attribute. Which can work more than one way.
If you want no scroll bar use hidden, if you want to keep the content you can use scroll.
body {
overflow: hidden; /*any content that would overflow would be hidden and there is no scroll bar, NOTE, this will not stop the containers from overflowing. */
overflow: scroll; /* this would place scroll bar once the content overflows */
overflow: auto; /*will only add the scroll bar only after content over flows but will not add if it the content does not overflow */
}
I am trying to create a widget sidebar and I am encountering problems with the displayed image. The sidebar has a padding of 20px from all sides and the image's width is set to auto. However, when I display the images, it goes over the padding of the container instead of making its size adjusted to the padding. Here is the code (CSS):
aside {
top: 0px;
height: 100%;
display: block;
position: fixed;
width: 30%;
background: #f9f9f9;
padding: 20px;
border-left: 1px solid #e3e3e3;
}
img {
border: 0;
width: auto;
max-width: 100%;
height: auto;
}
*, *::before, *::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
HTML:
<aside>
<div class="widget">
<img src="/disk.png">
</div>
<aside>
The widget class has no style, as I haven't implemented it due to this problem. Here is the screenshot: http://imgur.com/Gw1E0lg (thats where the container ends). How can I fix this issue? How can I make the image's width to be 20px less automatically, so it aligns with the CSS rules of the parent?
I found the answer myself. When using fixed CSS position without the right attribute, at least in safari and chrome, the block would align against the parent container's width. So, if the block is:
<nav style="position:fixed;left:0px;width:80px;">
</nav>
<main style="margin-left:80px;padding:10px;position:relative">
<div class="content" style="width:80%">
</div>
<aside style="width:20%;position:fixed;top:0px">
<div class="widget">
<img src="/disk.png">
</div>
<aside>
</main>
The aside would look like a right sidebar that fits the main element. But since the fixed position's width is relative the window, not the parent, its right position would basically start from off the screen, and the "20%" would be 20% to the parent, ignoring the other width. I don't know why safari and chrome render it this way, but because of that and the unluckiness of image size being 10px smaller than the aside element, I couldn't figure out how this problem is even possible.
So, to get what I wanted, I change the asides position to absolute and added overflow-y:scroll to my content class as the right bar should never move. Yes, I could play with width of the right bar but in my project that's the least of my concerns right now
Take this simple example... something I never noticed before now.
HTML:
<body>
<div class="container">
<div class="sidebar">
</div>
</div>
</body>
CSS:
*, *:before, *:after {
box-sizing: border-box;
}
html, body, div {
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 20px;
height: 100%;
border: 1px solid #000;
}
.container {
height: 250px;
}
.sidebar {
width: 20%;
}
setting the height of body to 100% seems to work fine in this fiddle.
however, if you change the size of .container so that it expands beyond the initial window size... you will notice the div breaks out of the body container (it even appears to break out of the html container too)?
Reformatted Question
Is it possible to set height of the body to 100% of browser window initially but also allow the parent containers to expand with its children if it expands beyond the initial window size?
Typically, when you want to have html and body take on the height of the viewport but also allow them to expand with the content, you set height: 100% on html only, and min-height: 100% instead of height on body. Further explanation can be found in my answers to the following questions:
height: 100% or min-height: 100% for html and body elements?
Applying a background to <html> and/or <body>
Unfortunately, because html is the root element, you cannot set min-height on it alone, or everything will fall apart. You need height: 100% because otherwise there is no parent height on which to base body and its contents; the height of html itself is based on the height of the viewport, which as you may have guessed is pre-determined.
This will be problematic if your actual layout has borders on all these elements, so instead I'm going to assume the borders aren't actually needed. You do not need to worry about the background because it will automatically be transferred to the viewport allowing it to cover the entire painting area (details in the second link).
Given your CSS, you can simply set height: auto on body to cancel out the height: 100% in your previous rule, along with min-height: 100%:
html, body, div {
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 20px;
height: 100%;
}
body {
height: auto;
min-height: 100%;
}
Note that I've also removed the borders, again based on my assumption that they're not needed.
Now we have another problem: once the content grows beyond the browser height, the padding on html disappears, since html doesn't expand along with the other content due to height: 100% (scroll to the bottom to see this).
You can't remove height: 100% since it's required, but you can still change the padding on html to margins around body instead because the margins will continue to take effect even once body overflows html, resulting in the following (again, scroll to the bottom):
html, body, div {
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 20px;
height: 100%;
}
html {
padding: 0;
}
body {
height: auto;
min-height: 100%;
margin: 20px;
}
The default behavior when an element is set to 100% height is to fill its parent entirely, minus the parent's padding value.
Its your padding. I put your code in Dreamweaver and began to check to see why it was doing that. You're right, it works just fine until it smacks out of the viewport by changing the height. I fixed the issue by removing the padding. I suggest reworking how you organized your padding or try using something fill space without using padding. (Such as margin: 5px; for example on the outer layers instead using padding on the inside of the layers. You can even just using a blank fixed height div, afix your inner divs to a percent, and rinse and repeat. Its a dirty method.)
I have a centered div (#content) on my responsive site that resizes to the browser window, like this:
<div id="container">
<div id="content">
<p>Here is some sample text.</p>
</div>
</div>
#container {
width: 100%;
}
#content {
max-width: 805px;
}
It works, except for when the stuff inside #content doesn't take up enough horizontal space to push the div's width out to the max-width I have set. For example, instead of being 805px, one of my pages with little content between the paragraph tags is 740px.
I have tried adding width: 100% to #content, but that stops the div from resizing.
What's the best way to fix this? Do I need to use a media query?
I found the answer. I did need width: 100%, but I also needed box-sizing: border-box, and then I needed to include the added width of my padding into the max-width, like so:
#content {
box-sizing: border-box;
width: 100%;
max-width: 885px;
padding: 40px;
}
I'm trying to get a simple solution for this layout.
This is the simplified html.
<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>
Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it's too long, the whole page should be scrollable.
Is this possible easily? Maybe changing something in the layout?
here's your solution: http://jsfiddle.net/S4akv/1/
You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.
With a header and footer, you also don't want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don't want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won't change or the footer won't move.
The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.
the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html
body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle { }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }
If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least :)
edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer