MichaelF 0 Posted August 29, 2020 Report Share Posted August 29, 2020 I have a CSS style that creates a TOP button fixed to the bottom right of a web page so, as you scroll, it stays put. How can I detect when the browser window is maximized so as to keep the Top button on the lower right edge of the content? My page design uses an 850px wide whole page table for content so the page width is fixed whether the browser window is at 850px or maximized. This is how a Word or PDF document behaves. The Top button appears at the lower right of the window at 850px but at the center of the page when the browser is maximized. The basic properties position the Top button to the left and slightly above the bottom of the window. position: fixed; bottom: 85px; left: 800px; with other properties specifying font properties and border effects. Yours, Michael F Quote Link to post Share on other sites
dsonesuk 914 Posted August 29, 2020 Report Share Posted August 29, 2020 left: calc(50vh + 425px); I think is what you are describing. If it is fixed 850px width, centred horizontally you need 50% of viewport browser window + 50% of fixed width( might require adjustment). Other option is to make same width 850px, position fixed container, centre it with left: calc(50vh - 425px); then add button within that Quote Link to post Share on other sites
MichaelF 0 Posted August 30, 2020 Author Report Share Posted August 30, 2020 Dear dsonesuk, I tried inserting the left: calc(50vh + 425px); into my <a href> tag as part of the style parameter, but whatever changes I tried for the two values, the Top button would not line up at the right edge of the content table in the 850px width and the max width. I checked the W3schools CSS site for more details about calc and found an example that used percentage instead of whatever vh stands for. After some experimenting, I found that left: calc(50% + 370px); positioned the Top button at the same relative position in the 850px width and the maximized width. That method seemed to use 50% of the browser width + 370px as the distance from the left edge of the window. Thanks for your help. It finally led me to the solution I had hoped for. Michael F Quote Link to post Share on other sites
Makwana Prahlad 1 Posted September 7, 2020 Report Share Posted September 7, 2020 Try this line: window = Object.assign(window, { innerWidth: 500 }); Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.