html - 固定在屏幕左侧的侧边栏和带有边距 : 0 auto 的中间内容

Question

我的元素有一些不同的结构。我不确定这是否可能。

Here is code what I have done so far.

它适合我的 19 英寸屏幕。

这是它在笔记本电脑屏幕上的样子(侧边栏与中间内容重叠) http://s29.postimg.org/a3vfj59kn/screen2.png

我的预期结果是侧边栏现在应该重叠在小屏幕的中间内容上(至少到 14 英寸)。

由于中间内容有自动边距，它在两侧留下空间，使侧边栏重叠。

我本可以使用媒体查询完成此操作，但我也需要支持 IE8。

我需要至少支持 14 英寸的屏幕。

它不是移动兼容的网站。

我只想使用 HTML/CSS 解决方案。可能吗？

Answer 1

我在管理端的一个元素中有类似的结构。

你可以做的是用 overflow: hidden. 添加包装器 div

并且在包装器 div 中再添加一个 div 与 min-width如下

middle content + (2 * with of side bar)在你的情况下它将是 min-width:1127px

这将使您的中间内容居中，并且不会让您的侧边栏与中间内容重叠。

* {
  margin: 0
}

.outer {
  overflow: hidden;
}

.innerWrap {
  min-width: 1127px
}

.leftBar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 234px;
  background: red;
  opacity: 0.6;
}

.midCnt {
  width: 660px;
  margin: 0 auto;
  height: 600px;
  background: yellow
}

<div class="outer">
  <div class="innerWrap">
    <div class="leftBar">
      Sidebar
    </div>
    <div class="midCnt">
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>
    </div>
  </div>
</div>