我使用Bootstrap。我有2列工作方式如下:
---------------------
| Content | Aside1 |
| |------- |
| | Aside2 |
---------------------
这个想法是把内容放在与Aside1和Aside2相同的高度,并合并一个溢出:滚动到内容。
HTML:
<div class="container-full">
<article class="col-md-8 col-xs-12">
<p>Long content there</p>
</article>
<div class="aside_full_screen">
<aside class="col-md-4 col-xs-12">
<p>Social Network Content</p>
</aside>
<div class="col-md-4 col-xs-12">
<p>Kitten Content</p>
</div>
</div>
</div>
CSS:
article{
border: 2px solid black;
background-color: rgba(240, 116, 90, 1);
overflow: auto;
height: 1200px; /* — Just there for example, had to be remove — */
}
::-webkit-scrollbar { /* — For hiding scrollbar — */
display: none;
}
Here是我主要得到的。here是我想要实现的。稍微精确一点,滚动条是隐藏的。我对JavaScript、jQuery或任何类型的提议都是开放的。
1条答案
按热度按时间oiopk7p51#
在您的HTML上添加aside1和aside2,如下所示:
然后,您可以使用jQuery来调用一个函数来处理文档就绪和窗口大小调整。在该函数中,您需要使用height()函数计算
.aside1
和.aside2
高度。然后将total
(aside1 + aside2)应用于article
。jQuery:
请参阅**example CodePen**。