修复 div 到页面中心，但调整大小时不溢出

Question

我正在尝试制作一个适合另一个 div 长度的导航栏，我在其中列出了一些数据。无论您滚动到哪里，我都希望它固定在页面顶部。我就是这样，但是当您从右侧调整 window 的大小并使其变小时，它最终会离开页面。我很确定这与我翻译它超过 50% 并且它不关心它是否超出屏幕这一事实有关，那么有什么方法可以轻松抵消这种情况吗？我希望它表现得像 table 那样。当它即将离开屏幕时，停止移动它。感谢您的帮助

这是一个演示： http://box.endurehosting.com/contents/public/Screen-recorder-fri-jan-03-2020-21-31-14.webm

这是实时网站： https://dev.theromdepot.com/archive.php?home

这是我的 HTML:

<div id="nav-bar">
<input id="search" placeholder="Search" type="input"></input>
</br>
</br>
    <div id="title-bar">
        <p>Name</p>
        <p>Count</p>
    </div>
</div>

这是我的CSS（我用的是SCSS）

$mainBackground: #1d1f21;
$textHoverColor: #919191;

@font-face {
 font-family: 'Muli';
 src: url('../fonts/muli.ttf') format('truetype');
}

body {
    background-color:$mainBackground;
}

a {
 color:white;
 text-decoration: none;
 transition: color .2s;
 &:hover {
  color:$textHoverColor;
  transition: color .2s;
 }
}

#nav-bar {
 position:fixed;
 width:25%;
 min-width:800px;
 left: 50%;
 transform: translateX(-50%);
 background-color:grey;
 padding:10px;
 z-index:1;
 #search {
  &::placeholder {
   opacity:1;
  }
  position:relative;
  border:none;
  border-radius:2px;
  padding:5px;
  font-size: 20px;
  line-height: 10px;
  &:focus {
   box-shadow:2px 2px 5px darkgrey;
  }
 }
 #title-bar{
  position:relative;
  color: white;
  p {
   display:inline-block;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: 2px;
   padding-bottom: 5px;
  }
 }
}

#list {
    margin:auto;
    width:25%;
    min-width:800px;
    color:white;
 #results {
  position:relative;
  top:100px;
  width:100%;
  .row {
   font-family: Muli;
   font-size: 14px;
   word-spacing: 2px;
      position:relative;
      width:100%;
      height:18px;
      padding-top:5px;
   p {
       display:inline-block;
    position:absolute;
    &:nth-child(1) {
     // left:5%;
    }
    &:nth-child(2) {
     left:51%;
    }
    &:nth-child(3) {
     left:67%;
    }
    &:nth-child(4) {
     margin:0;
     left:82.5%;
    }
   }
  }
 }
}

Answer 1

问题出在您的 min-width 属性，它不会让它缩小到 800 像素以下。因此，当您缩小 window 并超过 800px 时，导航栏保持相同的宽度。

一个解决方案可能是使用 媒体查询 当您达到 800 像素的屏幕宽度时，您给 css 属性另一个值。

如果不需要 min-width 属性，因为您设置的是 width，您只需将其删除即可。

修复 div 到页面中心，但调整大小时不溢出

Fix div to center of page, but don't overflow when resizing

html

css

css-position