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

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>

在上面的代码中，我试图创建一个菜单部分和内容部分菜单部分的特点是即使调整窗口大小，其宽度也保持不变。但是内容部分需要根据窗口大小调整大小。但这里给出的设计不是一个响应性设计。设计这样的菜单和内容部分是否可能不失去响应性？

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

您可能应该使用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

Answer 3

这样？

.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>