<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>fix</title> <style> *{ margin: 0; padding: 0; } .main{ width: 1200px; margin: 0 auto; height: 500px; border: 1px solid #ccc; } .hh{ width: 15px; height: 60px; border: 1px solid #ccc; position: fixed;box-sizing: border-box; } </style> </head> <body> <div class="main"></div> <div class="hh" style='right:342px;top:20px;'></div> </body> <script> var hh = document.querySelector('.hh'); window.onload = function(){ var win = window.innerWidth; hh.style.right=(win-1200)/2-18 +'px' } window.onresize=function() { var win = window.innerWidth; hh.style.right=(win-1200)/2-18 +'px' } </script> </html>
窗口宽度+版心宽度 除以 2 减去 侧边栏的宽度
