固定边栏位置和响应

我想学习媒体查询，并在CSS中稍微多一点。截至目前，我想要一个不会随内容向下滚动的固定侧边栏。固定边栏位置和响应

而且，我一直在阅读有关此前有媒体质疑..只是不明白他们尚未..也许一个样本给我暗示...

这里是我的代码..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
.wrapper { 
    width: 1024px; 
    margin: 0 auto; 
} 
.content { 
    background-color: #CCC; 
    width: 700px; 
    float: left; 
} 
.sidebar { 
    float: right; 
    height: 500px; 
    width: 300px; 
    padding: 10px; 
    background-color: #666; 
} 
</style> 
</head> 

<body> 
<div class="wrapper"> 
    <div class="content"> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    </div> 
    <div class="sidebar"></div> 
</div> 
</body> 
</html>

为了简短起见，我只是想模仿这个site ..只是为了测试我的技能。它看起来很简单...

正如你所看到的，如果你调整浏览器窗口的菜单改变了，那是什么样的jQuery效果？如果是的话，我在哪里可以找到一个教程..

来源

2013-08-16 Jeremi Liwanag

实现它去看到这个小提琴http://jsfiddle.net/uPpJr/ ..固定侧边栏添加的位置，现在在响应一个刚刚卸下固定位置在媒体查询中 –

我刚刚查看了示例网站的源代码。右边的固定条在一个html5元素旁边（它可以是一个div）。这个CSS有一个固定的位置和一个比包含帖子的左边的列还大的余量。设置固定位置的侧边栏div。 – dotnethaggis

边距超过700px的边栏？ –

媒体查询： http://css-tricks.com/css-media-queries/

滚动条你还挺自己说..让现在的位置是：固定;留下：与包装一起; 并从侧边栏中取出包装div。

Gr。凯文

来源

2013-08-16 12:31:29 KevinB

哦，所以侧边栏是在包装div外？并给sidebar类一个位置：固定??嗯。那么上面的例子呢？这些有效吗？ –

是的，但他们给你使用的代码是我只给你东西阅读和学习。 – KevinB

你可以做的代码？并与他们的病态相比？ –

可以隐藏侧边栏div时屏幕的宽度得到一个特定的大小以下，像这样：

@media all and (max-width: 720px) { 
    #sidebar { 
    display:none; 
    } 
}

或者你可以浮起来离开这将显示在页面的底部：

@media all and (max-width: 720px) { 
     #sidebar { 
     float:left; 
     } 
    }

您可能需要调整CSS以及最大宽度以满足您个人希望媒体查询运行的要求。

编辑 - 在移动

菜单调整最简单的解决办法是使用的电网骨架。

两个主要有：

如果你去他们的网站和调整，你会看到根据屏幕大小改变菜单的窗口。调查代码，看看他们是如何做的，这会帮助你理解它。很明显，阅读所有的教程。

这里也是一个教程，通过从头http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/

来源

2013-08-16 12:41:07 dotnethaggis

是的，我认为我已经知道div的位置，当它符合某个设备的宽度时...我想我现在的问题是当您在小屏幕中查看时发生变化的可点击菜单。 –

我已更新答案以帮助调整菜单大小。 – dotnethaggis

你的问题没有询问有关菜单大小调整 - 尝试保持全部上下文。更新您的原始问题以询问菜单。 – dotnethaggis

固定边栏位置和响应

回答

相关问题