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/
Related
Example: http://jsfiddle.net/3p9urx4y/
I am trying to make mobile navigation that has to be placed under the header. But if I am specifying the next properties:
.list {
top: 50px;
overflow-y: scroll;
}
The last 50px of the content is missing because top property is not zero. I was trying to make the outer div with padding-top of 50px, but in this case scrolling appears at header area and this is not expected behavior.
We could specify the margin-bottom of the last list child and that helps:
.item:last-child {
margin-bottom: 50px;
}
But that is the trick and I am trying to find better solution.
I have found this question Scroll part of content in fixed position container but I need something different. My header has to be fixed and navigation menu has to slide from the right side when user clicks the navigation button.
Edited: http://jsfiddle.net/3p9urx4y/ new example
Your .list has height: 100vh, so it will occupie the equivalent of 100% of the screen's height no matter its position.
One solution would be setting the list height to calc(100vh - 50px). I've edited the fiddle.
The calc function allows you to execute calculation when specifying a css property. More information here.
Give the header a position of fixed, a height and a width, don't forget to give it a z-index...then your navigation below it should be fine I can toss it more suggestions it you need me #cheers
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.
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'.
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.