I looked through almost all the posts here and on Google and can't find the answer to my CSS layout question about “3 columns with equal height with a“ really “sticky footer” with layout requirements as follows:
The top section of the header, a line for drop-down menus and another line for toolbar buttons.
Section "Main Content" with 3 columns with equal height. The central column will have the width of the liquid, the left and right columns will have a fixed width. All 3 columns will have current / variable height, and EACH COLUMN will automatically show / use its own scroll bar if there is more content than there will be in the visible visible area of the column content. In other words, columns should NOT press the “sticky” footer below if any column has long content, but instead shows / uses the scroll bar to scroll the content by the user.
The footer section (sticky / fixed) that should ALWAYS be visible at the bottom of the window / viewport regardless of the length of the content in any of the three columns of the Main Content section. The footer should not be pushed by any of the three columns above it and should be truly “sticky” and always visible in the viewport.
I literally spent several weeks searching for an answer, but all the decisions I saw about “(three) equal height columns with a sticky footer” do not prevent the columns of the main content section from “pushing” the footer if there is long content in any of the content columns .
I really hope someone can help with this. Thanks in advance!
source
share