I have the following page with sidebar: https://www.slagerijrudi.be/product/broodje-ham/
I was wondering if there is a simple way to make my sidebar have the same height of the content next to the sidebar. So the sidebar should stretch from header to footer, instead of stopping halfway the page.
In order to allow the aside (or sidebar) to reach its full height, you can make it have an absolute position. Do remember though to turn it off for smaller screen sizes (where you'd want to collapse the sidebar). The best design practice at the moment is to declare specific behaviour for larger screens: #media screen and (min-size:667px) { .. your code for big screens here .. }
Add the following to solve the issue:
.wf-wrap {
position: relative;
}
.sidebar {
position: absolute;
left: 0;
height: 100%;
}
Edit: as a comment on the question put it, a flexbox is a neater solution, but not a 'quick fix'.
Related
I want to create a simple side-navigation that takes up the entire screen's height. I am using Milligram for my base, and I want my side-nav to work with it. I have the following set up:
Codepen demo
As you can see, my sidebar is the following element
<div class="sidebar"></div> with the following styles:
div.sidebar {
position: absolute;
width: 250px;
height: 100%;
z-index: 99;
background-color: black;
}
This sort of works, the sidebar appears above all else, but everything else does not get pushed to the side. And if the screen is small, the content clashes with the sidebar.
How can I make it so the sidebar pushes everything else (including the navbar) to the right by 250px(its width)? I know this will make things unusable on smaller screens, but I will give the user a way to toggle it.
Any help is appreciated.
You can set the left margin on your equal to the width of your sidebar.
section .container {
margin-left: 250px;
}
I just revamped my website and I'm having a bit of trouble with the fine details (keep in mind that I know almost nothing about web development, even though I'm in the software field; I'm trying to learn).
Namely, I noticed on some of my smaller pages (my About page, for example) have a white bar going across the screen underneath the footer. I'd much rather have the footer dynamically extend itself to the bottom of the screen. How can I do this, can I write some custom CSS?
Here's my site:
http://frankpernice.com/resume/
Thanks to flexbox, sticky footers (including those without a fixed height - because hardly anything that is responsive can have a fixed height) have become dead simple (depending on the markup of your page). Fortunately, your markup is excellent for it:
html,body { height:100%; }
body { display: flex; flex-direction: column; }
body>section { flex: 1 0 auto; }
Change to fixed poistion ;-)
.footer-bg {
position: relative;
}
.footer-bg {
position: fixed;
bottom: 0;
}
Aibrean is correct, you need to use a sticky footer similar to that proposed in the link here...
http://ryanfait.com/html5-sticky-footer/
Alternatively you could apply position: fixed; and bottom: 0; to your 'footer' element, but this would bring problems when working with pages that have content that stretches beyond your window height.
Matt
I want to display my footer at the bottom of the page, relative to the content area. So it should adapt if my browser is smaller or larger, up until where the content area stops.
I tried to follow this link but I can't seem to get it to work on my website.
I added the PUSH div at the bottom of my content area
I set the correct heights and adjustments in the css
My footer is still displayed half way on my screen and also messes up the titles. The guys that sold me the Wordpress theme are reluctant to help me ...
If anyone could guide me in the right direction that would be a great help!
I think this could do what you want:
body {
padding-bottom: 50px;
/* Set a padding-botton equivalent
to the height of your footer
this is for preventing the
footer to be covered because
of its z-index
*/
}
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: -999;
}
Hope it works ;)
Add the following code to your css:
footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
}
The footer will be always on the bottom.
Ok so the issue here is this, you can stick the item to the bottom as #Dzhambazov suggested either with position:absolute or position: fixed it is going to stay in place at the bottom even if that is halfway up your content.
So you can go with other alternates like: How do you get the footer to stay at the bottom of a Web page?
Mentioned in the comments, but this is not going to be as easy with a prebuilt theme as you will be fighting with the theme dev's structure.
What you could do as a fix to make it more bearable is to increase the minimum height of the content so that it "fakes" the footer further down, this has its draw backs and could mean that your footer is off the bottom of the view port, but if it is irritating you to that level. you could try.
#content {
min-height: 200px;
/* forces the content block to take up space */
}
hope that helps other wise stick the footer to the bottom as mentiones and have it always display, but note that may trash mobile so you will want to remove the positioning via a media query for phones etc.
The situation i'm facing :
i have an asp.net with a header, sidebar and another right sidebar. the thing is when i execute my website in browser and mimimize browser window. the sidebar on the left jumps on the content page and controls get all mixed. see picture for an idea.
Another problem is when i executed that website in a wider screen resolution the controls ( panels ) had a bigger margin and evertyhing look wider.
Any ideas how to fix this ?
Thank you in advance
EDIT:
Sidepanel ( right ) CSS code:
#droite
{
position: fixed;
top: 22.5em;
right: 5%;
width: 13%;
background-color: White;
}
What I did on my website (firedrake969.github.io) was add some simple jQuery code to hide the sidebar whenever the window became too small. If you don't mind using jQuery, I'd say that's the way to go. However, if you don't want to use jQuery, I don't think position:fixed can have the bar hide just with CSS/HTML if the browser window gets too small.
You probably need something similar to this. the max-width can be set to any screen width you choose.
#media screen and (max-width:768px) {
#droite
{
position: fixed;
top: 22.5em;
left:5%;
width: 100%;
background-color: White;
}
}
See this webpage.
First try scroll it, see that the left bar remains fixed.
Resize the height of your window, so that not all of the content of the left bar is visible. Now scroll. This time, the left bar is not fixed.
In this page, there is a jquery that calculates height of left bar, compares it to the window-height and then makes the left bar position fixed or absolute.
However, I'm wondering if something similar is achievable through just HTML and CSS, not using jQuery or similar.
Any suggestions?
In short what I'm looking for is a bar with content that remains fixed, but is scrolled if the content overflows. But the scrolling should be together with the whole page.
You can use media queries to direct CSS at certain screen sizes (and other things too) so you could use one stylesheet if the screen is too small. I'm no expert so no examples, but take a look here http://css-tricks.com/css-media-queries/ . Sorry! but guess you figured it out :)
Edit: The working result is this:
#leftnav {
/* default look */
width: 300px;
position: fixed;
top:0;
height: 100%;
}
/* set the size at which the content is clipped and we cannot have fixed position */
#media all and (max-height: 500px) {
/* things inside here will only have an effect if the browser window shows
less than 500 px in the height, so here I apply the special rules */
#leftnav {
position: absolute;
height: auto;
/* etc.. */
}
}