Elements on my html page move when i resized my browser
Question
All of my elements move when i resized my browser and i don't understand why.
But i want them to stay at their own position, also when i resized my browser, so, how can i do this in css ?
Thanks you !
body { background-color: #c3ced4; } .select_dev { width: 380px; height: 850px; background-color: #142431; position: absolute; left: 0; top: 0; } .excel_preview { position: absolute; top: 70px; right: 40px; min-width: 1450px; min-height: 720px; background-color: white; border-radius: 8px; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Preview</title> </head> <body> <div class="select_dev"> <div class="dev"> </div> </div> <div class="top-page"> <div class="top-name">D-FRAGMENT</div> <div class="top-choice"></div> </div> <div class="excel_preview"> </div> </body> </html>
1 answers
solution1
0 2018-10-05 09:06:48
Every time you use a height or width with %, you make them responsive to changes on the window size, as they adjust to the size of the container.
If you want them to be independent of the window size, you should give them a fixed size in pxs.
Then, if you do want to change the size for devices such as mobile, the ideal solution would be to implement mediaqueries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.