使用postion时div会收缩：固定

Question

我有一个<div>，我想让它成为position: fixed。我添加了 CSS 规则position:fixed，但在添加后<div>缩小了。

请指导我。

我的HTML代码就是这个

<div layout="row" style="background-color:#1CA5EA; position:fixed">

    <div offset="25" flex="30" class="input-container">
       <md-input-container flex >
          <label style="color:white">Search</label>
          <input ng-model="search" style="border-bottom:2px solid white;color:white;">
       </md-input-container>
    </div>

    <div flex="10" class="input-container">
       <button class="primary-button md-button md-default-theme">
         <span class="ng-scope" ui-sref="company.addRecruitmentProject">
           + JOB AD
         </span>
       </button>
    </div>

 </div>

Answer 1

对该div使用width:100%;。

<div layout="row" style="background-color:#1CA5EA; position:fixed; width:100%;">

    <div offset="25" flex="30" class="input-container">
       <md-input-container flex >
          <label style="color:white">Search</label>
          <input ng-model="search" style="border-bottom:2px solid white;color:white;">
       </md-input-container>
    </div>

    <div flex="10" class="input-container">
       <button class="primary-button md-button md-default-theme">
         <span class="ng-scope" ui-sref="company.addRecruitmentProject">
           + JOB AD
         </span>
       </button>
    </div>

 </div>

Demo here

Answer 2

可能是其他div或Html元素对Div产生影响。这就是为什么你的div会缩小的原因。其次请在此处添加您的CSS代码，然后我可以解决您的问题。

Answer 3

在这种情况下，您应该定义其位置固定的<div>的宽度。 比方说吧：

.div {
   width: 80%; // or whatever you want to be the size
}