是否可以在不丢失响应能力的情况下以像素为单位设置一个部分的宽度，以百分比为单位设置剩余部分的宽度？

Question

aside {
    background-color: blue;
    width: 220;
    list-style: none;
    height: 100%;
    float:left;
}

article {
    background-color: red;
    width:60%;
    height:100%;
    float: left;
}

        <aside>
            <ul>
                <li><a>1st item</a></li>
                <li><a>2nd item</a></li>
                <li><a>3rd item</a></li>
                <li><a>4th item</a></li>
            </ul>
        </aside>
            
        <article>
          <p>contents here</p>
        </article>

在上面的代码中，我尝试创建一个菜单部分和内容 part.the 菜单部分的特点是它的宽度保持不变，即使 window 被调整大小。但是内容部分需要根据 window resizing.but 调整大小这里上面给出的设计不是响应式的 design.is 可以设计这样的菜单和内容部分而不丢失它的响应性吗？

Answer 1

从 article 中删除 width 和 float 属性并添加 overflow: hidden

aside {
  background-color: blue;
  width: 150px;
  float:left;
}

aside ul {
  list-style: none;
}

article {
  background-color: red;
  overflow: hidden;
}

<aside>
  <ul>
    <li><a>1st item</a></li>
    <li><a>2nd item</a></li>
    <li><a>3rd item</a></li>
    <li><a>4th item</a></li>
  </ul>
</aside>
            
<article>
  <p>contents here</p>
</article>

Answer 2

像这样？

.wrap {
  display: flex;
}
aside {
    background-color: blue;
    width: 220;
    list-style: none;
    height: 100%;
}

article {
    background-color: red;
    height:100%;
    float: left;
    flex: 1;
}

<div class="wrap">
  
  <aside>
    <ul>
      <li><a>1st item</a></li>
      <li><a>2nd item</a></li>
      <li><a>3rd item</a></li>
      <li><a>4th item</a></li>
    </ul>
  </aside>

  <article>
    <p>contents here</p>
  </article>

</div>

Answer 3

您可能应该使用 css3 calc()，这似乎是一个直接用例。

aside {
  background-color: blue;
  width: 100px; // modified, you did not indicate units
  list-style: none;
  height: 100%;
  float:left;
}

article {
  background-color: red;
  width:calc(100% - 100px); // modified
  height:100%;
  float: left;
}

<aside>
  <ul>
    <li><a>1st item</a></li>
    <li><a>2nd item</a></li>
    <li><a>3rd item</a></li>
    <li><a>4th item</a></li>
  </ul>
</aside>

<article>
  <p>contents here</p>
</article>

在此处了解浏览器支持：http://caniuse.com/#search=calc

是否可以在不丢失响应能力的情况下以像素为单位设置一个部分的宽度，以百分比为单位设置剩余部分的宽度？

Is it possible to set width of one part in pixel and width of remaining part in percentage without lost it's responsiveness?

html

css

fixed

responsive-design