Мобильная версияI have the following HTML and CSS:
.container { display: flex; min-height: 100vh; flex-direction: column; gap: 2px; } .header-nav, .footer-nav, .container { padding: 4px; } .main-content { display: flex; flex: 1; flex-direction: column; border-radius: 1rem; background-color: #F1F5F9; padding: 6px; } .grid-content { display: grid; flex-grow: 1; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .form-content { display: flex; flex-direction: column; gap: 2px; } .flex-content { flex: 1; } .button { background-color: #1E3A8A; padding: 4px; color: #BFDBFE; } Header navigation Main content form Button Aside Footer navigation
It's a full page app layout. It creates a header, a content area and a footer. In the content area there are two columns, one for the main content, one for aside. My aim is that the button is placed on the bottom of the page. Note the button on the reference image.
Firefox (and Chrome) - all good
Safari - issue
In Safari the button is positioned outside the main content area.
Playgrounds
- Codepen - this markup
- Tailwind play - extended with Tailwind
The optimal solution will not alter the markup too much. This is a web application with nested web components. I don't want to refactor template logic.
The markup works fine in Firefox (124) and Chrome but fails in Webkit (Safari 189). I have checked similar issues here, but I think this might be unique. I am hoping to be missing something obvious.
I have already tested:
- Removing min-height: 100vh on the .container will fix the issue. But I want to the page to fill the viewport. height: 100% will not work either for my use case, since the content can be larger.
- Removing the .grid-content (and the aside) also makes the issue go away. The grid is required to display navigation.
- At a certain height the threshold jumps back into the desired position. Strange! Maybe the height calculation is not considering the outer header and footer.
Источник: https://stackoverflow.com/questions/781 ... lex-column
