centering - CSS to create element with fixed ratio -
this question has answer here:
i want create html page with:
- a fixed-width, full-height navigation pane on left
- a square element in centre of remaining area
i want square big possible, expanding fill area not taken navigation pane.
i have javascript solution (see below , jsfiddle), i'm hoping possible css solution.
<!doctype html> <html lang=en> <head> <style> html, body { margin: 0; height: 100%; background-color: #fff; } nav { height: 100%; width: 96px; background-color: #666; } main { position: absolute; background-color: #000; color: #fff; } </style> </head> <body> <nav> navigation </nav> <main> should square </main> <script> ;(function createsquarearea() { var main = document.queryselector("main") var nav = document.queryselector("nav") var navwidth = nav.getboundingclientrect().width var debouncedelay = 100 var timeout window.onresize = windowresized maintainratio() function windowresized() { if (timeout) { window.cleartimeout(timeout) } timeout = window.settimeout(maintainratio, debouncedelay) } function maintainratio() { timeout = 0 var windowheight = window.innerheight var mainwidth = window.innerwidth - navwidth var mindimension = math.min(windowheight, mainwidth) var left = (mainwidth - mindimension) / 2 + navwidth var top = (windowheight - mindimension) / 2 main.style.left = left + "px" main.style.top = top + "px" main.style.width = mindimension + "px" main.style.height = mindimension + "px" } })() </script> </body> </html>
jsfiddle: https://jsfiddle.net/ymzq6zm0/7/
html
<nav> navigation </nav> <main> <div class="sc"> should square </div> </main> css
html, body { margin: 0; height: 100%; background-color: #fff; } .wrapper { display: flex; align-items: center; height: 100%; } nav { float: left; height: 100%; width: 96px; background-color: #666; } main { float: left; width: calc(100% - 96px); height: 100vmin; max-height: calc(100vw - 96px); } .sc { margin: 0 auto; background-color: #000; color: #fff; height: 100vmin; width: 100vmin; max-width: 100%; max-height: calc(100vw - 96px); } how works
our main objective here to:
- center align
.sc - align
.scvertically center - make sure
.scsqaure - make
.scresponsive
the square highly responsive changes height , width according window's or view port's height , width. need use vw (viewport's width) , vmin (lowest value between viewport's height , width). read more these units here: https://css-tricks.com/viewport-sized-typography/
to make .sc square, need make sure width , height equal. since ratio of height , width of viewport not same, need find out lowest value between these 2 , assign them .sc can done using vmin unit mentioned above.
the square should remain centered in remaining area after navigation on left, never cross remaining area , resize accordingly.
this can accomplished following codes:
nav { float: left; height: 100%; width: 96px; background-color: #666; } main { float: left; width: calc(100% - 96px); height: 100vmin; max-height: calc(100vw - 96px); } .sc { margin: 0 auto; background-color: #000; color: #fff; height: 100vmin; width: 100vmin; max-width: 100%; max-height: calc(100vw - 96px); } main remaining area after nav. make sure of using calc property subtract nav width 100%.
the .sc placed inside main , have added max-width , max-height properties make sure .sc resizes according main.
max-height: calc(100vw - 96px); property of .sc equal width: calc(100% - 96px); property of main. both calculate same values.
by adding max-width: 100%; .sc make sure it's maximum width equal of main.
now since, both max-height , max-width along width , height of .sc remain same, square.
at end put both nav , main inside .wrapper flexbox , has align-items: center; property. ensure square vertically centered respect nav.
Comments
Post a Comment