So I'm trying to keep the page at 2000px in height but from this screenshot I have extra pixels worth of space after the 2000px for the container.
How can I restrain the page to the 2000px height?
I've been using position: absolute; for everything past the tabs that hover down because when those tabs are hovered over they push the rest of the content downwards. Is there a way to get rid of all the extra space at the bottom of the page?
Here is a jsfiddle link.
http://jsfiddle.net/kAX55/
You need to remove the margin,padding from your body.
body {padding:0;margin:0;}
You should use a 'reset css'.
Related
I have a div near the bottom of my page that I want to extend all the way to the very bottom edge of the window so that the background color of the page can not be seen below it. Initially, depending on the size screen that the page was rendered on, a small sliver of the background color was still visible below the div. By adding
html, body, .wrapper {
height: 100%;
}
to my CSS ("wrapper" being the class of the div in question), I fixed that issue, but now the div has a height of around 500px (it varies based on the window size) despite the only element in the div having a total height of 132px (which does not change regardless of window size). Because of the positioning of the div, this 500px height makes the page stretch and now there is a large blank space at the bottom of my page, underneath the content inside the div.
I used Chrome's developer tools to inspect the HTML, body, and div tags and there is no strange padding/margins and no defined height (other than the "100%" that I set). If you'd like more code I can gladly provide more but since I don't know exactly what the problem is I didn't know what would be relevant (plus I'm using bootstrap so finding all of the relevant CSS can be a pain sometimes). Thanks in advance.
You can use flexbox to have the .wrapper, or .table in your example, div fill up the remaining height.
For the parent element (in your example, body) set display: flex; flex-direction: column;
For the element that you want to expand (.wrapper or .table) set flex-grow: 1.
Your Example Updated: https://jsfiddle.net/754s67ur/2/
I have updated the fiddle you posted in the comments to add background colors and removed paddings and margins to better visualize the problem here.
What you need is the CSS calc function to have your .table div take up 100% of the page MINUS the nav and body content of your page (represented by the <p> in your fiddle).
In the fiddle they are both 18px, so combined it's 36px and that is what I need to minus from the 100%. So the style would look like this:
height: calc(100% - 36px);
This is how you calculate the remaining space. But this only works for static height elements. Here is a fiddle of the solution.
I'm rather new to html and css and I'm currently stuck with two annoying problems.
Unless my header's position is absolute it won't cover a small area above and beneath itself. But when the position is absolute the container beneath it partially goes behind the header.
I want my header to cover the same area as it does when it's position is absolute, but I want the container's position to automatically be right beneath the header.
When I divide the footer in half, for "Start" to be on the left side and "Contact" on the right side, and add the Copyright part as a float:right everything else on the line gets pushed to the side.
I want "Start" and "Contact" to expand from the middle, out to the sides, while the Copyright part is to the far right. Everything on the same line.
The header's opacity is only to show the problem.
The line in the middle is to make sure the footer's text is in the middle.
I want to avoid a scroll bar.
https://jsfiddle.net/swvyrLnf/
header {
width: 100%;
opacity: 0.5;
position: absolute;
top: 0;
background-color: black;
color: white;
text-align: center;
}
For the header: Set the header height to 100px. Then set the margin-top of your body to 100px.
For the scroll bar: This is partially determined by the height of the body. If you want to avoid the scroll bar then you will probably need to change the body height from 100%.
For the Contact/Share links: I'd add padding left/right so that they separate from one another. To make them stretch farther you could change the size of the text. Another option would be to put them in a container of say width 40% and make the whole container a link.
The header should have overflow: hidden; and then you are fine. It's because the items inside have margin that extends the container.
There is a layout with central block "page" that has left, right and bottom background decorations (the light green plants on green background).
Example page
The problem is with the Bottom decoration, that is an empty bottom block, that is intended only to show its background image.
In order to be visible it must have height defined, however this height extends whole body height, and the window always scrollable to the down of the Bottom decoration block
You can change the "page" block height to something high, like 1000px or more to see the problem.
I'd like that full height bottom decoration will be seen only on short pages, where there's a lot of space beneath the page (like on initioal view). And on the long pages there should remain minimal gap of 20px height.
Shortly, it must only be visible on the remaining space, not extend the page by it's own height
I'm sure it is possible, but I'm stuck
Thanks
Found solution, simple fix
.wrapper {overflow: hidden; min-width: 1000px; }
Here's the result:
http://62.90.136.69/resultbottomdecor.html
Thanks
I'll try to explain this as best as I can ;)
Basically, I have a sidebar <div id="sidebar"></div> which is floated to the leftside and has fixed position. I planned to have another div just after it that will contain the content, but the problem is that, because sidebar has fixed position the div that I expect to be after it (to the right side) is appearing behind sidebar. This is an issue, because I need to use margin-left: 310px (310px is a width of sidebar) to make another div appear after the sidebar, so instead of occupying 100% width left on the page without a sidebar's 310px it occupies full page and causes align problems.
It's hard to explain, but if you visit my page http://freshbeer.lv/development/en/ you can see white div, it has margin-left: 310px; and width: 100%; inside it there is a grey div with width:700px; and margin: 0 auto;. I expect grey div to be aligned in the middle between 2 images at the background, but as white div is occupying more space than needed it doesn't happen. Could anyone suggest a solution please?
Maybe I am misunderstanding your question, but in #container you can either remove width: 100% or change it to width: auto.
The problem is that it is getting the width of the parent container (which if you go far enough back is taking the width of your browser window) and then adding the margin. So it is 100% + 310px. Hence the reason it is 310px wider than your browser window.
Try this. First, make sure that your side bar is first in your script. Then, do not set the width of your main section. Instead, just say display:block. So something like this:
<html>
<body>
<div style="width:310px; float:left; background:#dddddd; height:500px;"></div>
<div style="margin-left:310px; display:block; background:#ff0000; height:500px;"></div>
</body>
</html>
In the above example, the top div is your side bar, and the second your main body section. I just added the heights so I could see the columns during testing.
On this fiddle:
http://jsfiddle.net/TechplexEngineer/nFZ8e/1/
How could one get the blocks element to fill the rest of the sidebar?
Thanks,
Blake
Edit: How can I make it so when I re-size the window the scrolled area remains stuck to the bottom. (No red shows beneath)
http://jsfiddle.net/TechplexEngineer/nFZ8e/7/
Add overflow: hidden; to your sidebar, and set padding-bottom: 9999px; on your block-level element that you want to extend all the way down.
http://jsfiddle.net/nFZ8e/3/