左侧固定定位，左侧自适应，在窗口改变的时候怎么保证不重叠？

张怼怼

39415115189

发布于
2018-02-04

图片描述

请问怎么保证窗口变小的时候这两个内容不重叠？

javascript css html

html5

阅读 2.5k

3 个回答

得票最新

不可能的是

2.3k189

发布于
2018-02-04

✓ 已被采纳

两个内容外面再加个div 吧. 一般用 flex 实现最简单，或者可以下面这样。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>

body{
  margin:0;
}
#container {
  padding-left: 200px;   /* LC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
  background-color: #ddd
}
#left {
  position: fixed !important;
  left:0;
  width: 200px;          /* LC width */
  background-color: #108EE9;
}

</style>
  </head>
  <body>
    <div id="container">
      <div id="center" class="column"><p>i am here</p></div>
      <div id="left"><p>I am left</p></div>
    </div>
  </body>
</html>