html - 页面加载后防止百分比调整大小

Question

我想知道这是否是一种防止页面加载后调整大小的方法。我有一个这样编码的 header :

header {
    position: fixed;
    top: 0%;
    left: 0%;
    height: 60px;
    width: 100%;
    margin: 0% auto;
}

我能否阻止页面加载后调整宽度，这样如果有人缩放或调整他们的网页，页眉将保持在加载页面时设置的 100%？

提前致谢!

Answer 1

您将不得不使用一些 JS 将标题元素的宽度设置为特定宽度，以便调整大小和缩放不会影响它。

这是一个使用 width 的 jQuery 解决方案.

<div>
  <header class="to-fixed">Header</header>
</div>

div {
  min-height: 250px;
  background-color: #CCC;
}
header {
  height: 50px;
  background-color: yellow;
}

var $to_fixed = $( '.to-fixed' );

$to_fixed.width( $to_fixed.width() );

JSFiddle:https://jsfiddle.net/w9psx3t7/1

这里发生的事情是我们使用 JavaScript 告诉我们元素在 100% 宽度时的宽度(以像素为单位)。然后我们通过 style 将该宽度直接应用于元素属性。 width() jQuery 的方法允许我们检索和设置元素的宽度。由于宽度是直接在元素上设置的，因此它将覆盖 CSS 设置的默认宽度值。

请注意，一旦页面加载完毕，我们的 JS 就会设置该值，并且当您重新调整 <header> 的大小时元素保持其宽度。