Question

我有以下结构。 http://i.stack.imgur.com/l59Zx.png {链接到图片}

我想在调整窗口大小时移动底部的侧边栏，但我无法想办法。

以下是我的一些代码

<div class="contentWrapper">
<div id="sidebar">.........</div>
<div class="content box">......</div>
</div>

CSS

.contentWrapper{
position: relative;
width:980px;
padding:91px 0 0 0;
margin:0 auto
}

#sidebar {
position: absolute;
top:100px; bottom:-100px; right:0;
width:200px;
background:#000;
}

.contentBox{
background:rgba(0, 0, 0, 0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000,endColorstr=#cc000000); /* IE */
padding:30px 0;
margin:0 auto;
font-family:'Abel';
font-size:24px;
color:#fff;
text-align:center
}

Answer 1

实现此目标的最佳方法是使用@media个查询。

在其余CSS代码的底部使用此代码。

@media (max-width: 768px){  /* mention the width here in px for which you want the sidebar to move down */
  #sidebar {
    position: relative;
    display: block;
  }
}

阅读：CSS media queries - Web developer guide | MDN

Answer 2

您可以尝试使用某些media queries more info here on w3s

在你的CSS中，有些东西是

@media (max-width: 600px) {
  #sidebar{
   //css here
  }
}

Answer 3

我建议你：

@media max-width(768px){ 
  #sidebar {
    position: absolute;
    width:100%;
    padding:0;
    margin:0;
    bottom:0;
    left:0;
  }
}

我想在页面调整大小时在容器下面移动一个div，我该怎么做？

3 个答案: