Jump to content

Recommended Posts

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

 

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...