将边栏固定在与其他元素相同的行中

时间:2015-05-31 17:51:28

标签: html css

所以基本上我有一个侧边栏,我不想在我的页面中修复,只有我行中的其他列可以滚动。

我尝试更改元素的position css属性,但原来的内容会被压缩到第一列。

我可以在此处获得演示:JSFiddle

这是我的HTML:

<div class="container">
            <div class="row">
                <div class="col-4" role="sidebar">
                    <div class="diamond"><span>RS</span></div>
                    <br />
                    <div class="brief">
                        Text here...
                    </div>
                    <form class="search">
                        <input type="text" placeholder="Search...">
                        <button type="submit"><i class="fa fa-search"></i></button>
                    </form>
                    <ul class="sidebar-menu">
                        <li class="github"><a href="#">Github</a></li>
                        <li class="twitter"><a href="#">Twitter</a></li>
                        <li class="stackoverflow"><a href="#">StackOverflow</a></li>
                        <li class="linkedin"><a href="#">LinkedIn</a></li>
                    </ul>
                </div>

                <div class="col-8" role="content">
                    <h1 class="title">Title</h1><div class="horizontal-rule"></div>
                    <nav class="subnav">
                        <ul>
                            <li><a href="#">Link</a></li> /
                            <li><a href="#">Link</a></li> /
                            <li><a href="#">Link</a></li> /
                            <li><a href="#">Link</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

1 个答案:

答案 0 :(得分:0)

我不知道您想要修复哪个元素,但您可以使用此方法:

<div id="id">
Content of the div
</div>

CSS:

#id {
position: fixed;
left: 30px; // or whatever you want
top: 100px; // or whatever you want
}

我希望这有助于你!