I'm trying to make a layout where the header gets scrolled out but the nav and footer are kept. Here's the link to it:
https://play.tailwindcss.com/LiIq5be2Wz?size=360x640
Here's the same code written in jsfiddle: https://jsfiddle.net/cdxqsfu4/
I already have it working but the framework I'll be using this on needs to have an app div. After adding it (or uncommenting it, in this case), only the top:0 part seems to be sticky, not the left:0. Is there a way to fix this?
EDIT: Here are the specifications I need:
The scrollbar should span the entire view, including the header and footer.
The header needs to be hidden when scrolled down.
The nav should be sticky to the top-most and left-most side of the screen.
The nav should span the entire width of the screen.
The footer should be sticky to the bottom-most and left-most side of the screen.
The footer should span the entire width of the screen.
The header needs to be outside of the app div.
The easiest solution would be to change the order of your markup. You should nest your header with the other divs and set one of them to overflow-auto. Doesn't matter which one. Using two overflow-auto's was the only way to get it to work with your previous structure, which loses the header scrolling.
See it working on Tailwind Play.
Related
I'm trying to create a table with sticky headers (without using position: sticky. The table also has overflow scrollbars, but this causes multiple issues with the CSS I have right now. I have a working example here: https://codesandbox.io/s/vue-template-1ge8v (html and css are defined in App.vue).
The issues I have with the current CSS are:
Scrolling horizontally, the border-bottom of the header row stops mid-way.
Scrolling horizontally, Heading is not sticky (it should always stay at the same position. (See 3.)
Scrolling horizontally and vertically, the column headers aren't scrolled with the current viewport. The Heading stays sticky though, which is correct behavior.
I've tried multiple variants of overflow, positioning and the like, but couldn't figure out what's wrong with my current CSS.
First issue is happening because there is visibility hidden in line number 31 App.vue file.
I am working on a site with a header at the top and a main content area. The header does not scroll but the main area does. This means that I have a scrollbar to the right of the main area but not to right of the header and they do not line up:
In this image the red bar is the content and the orange bar is the centre section of the header that should be in line with the content.
These are both aligned using this css:
.center-content {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
What is the best approach for this?
I was thinking of just adding the scrollbar permanently but I don't really want to do this. I could then just add some padding to the left of the main section to re-center it. Alternatively I could add padding to the right of the header.
Questions:
How would I change the style of the header based on wheather the main section has a scrollbar?
How would I add padding to the main section based on wheather it has a scrollbar?
How to I get the width of the scrollbar? Is this guaranteed to be the same across all browsers (I need to cater for mobile as well)
I have created a JSbin for this that demonstrates the issue.
I am using the material-design-lite style sheets for this.
You will not want to change any styles based on the scrollbar - I think that's too complicated and it would almost certainly involve javascript. Scrollbars are also not consistent across browsers/mobile. A better option would be to fix the header to the top of the page, and make the content div's margin-top equal to the header's height. Then the scrollbar, when it appears, will be to the right of the entire page. See an example here:
http://output.jsbin.com/xuroyaceli/#
Resize the window to see how it looks with a scrollbar.
I am attempting to hold my footer div at the bottom of the site to avoid blank space underneath it on shorter pages. When I set the position of the footer to be absolute, the responsive menu button seems to take its position relative to the footer and no longer to the header. When I change it back from absolute it works normally. It is almost as if it is associating itself with the footer menu rather than the header menu, but I can see no good reason why this would happen. Also, when I am logged in to WordPress, the top menu bar (on the front end) gets pushed down in just the same way. However, this doesn't happen until the viewport hits 600px (I have no media queries at 600px). The responsive menu already appears at a viewport width of 767px.
This is a WordPress website in progress here.
I am using a custom theme and this responsive menu
Does anyone have any idea what might be going on there? Thanks.
You would need to move the #click-menu div & the #responsive-menu div outside of the footer element in order to fix this.
Here's a similar issue w/ some great answers: Absolute positioning inside absolute position
Working on a new design using bootstrap3 and trying to stretch the page so that even if there's not enough content to fill the page, the footer section would stay to the bottom.
The reason why I'm using position absolute, is because there's a link from the billing software that's being added within the content, I don't want to remove the link but position it a bit to the bottom in the footer section, in the center bottom, thus since I can't control where this will appear(do know where appears, just can't control), using position absolute on the specific element helps me here.
Now, that's not issue, just saying why I need to use position absolute and why I made the divs like this:
wrapper
>>wrapper_content
>>wrapper_footer
fiddle: http://jsfiddle.net/raicabogdan/jsk1b7ua/4/
the footer section is properly set to the bottom, however for some reason, the wrapper_content does not go 100% height automatically on load or on window resize. Also if you resize to mobile view, content will go down few table rows.
The content goes under the footer section.
What am I doing wrong here? Left a fiddle of the html page along with some css that I felt were needed above.
Hope there's someone that could get me out of this.
Cheers.
Try this link. I have used this method to get the footer to stay at the bottom of the window.
http://ryanfait.com/sticky-footer/
How can I extend a div to the bottom of the page? Let's say I have a div that starts at the top, and has a background image I want repeated to the bottom of the page. How would I go about doing this?
Live example found here: http://mibsolutionsllc.com/ecgridos/about/ with the #content div.
Switch it around, have the background for your content as the body tags back ground then over lay the header over the top of it via a div or other element :)
CSS Sticky Footer does something similar, they've got a solution that seems to work on a whole range of different (including very old) browsers. If you don't need the footer you can always still use their solution and set the footer height to 0px.