Question

我正在寻找在我的页面上创建一个右侧边栏，但是在浏览了多个指南后我仍然卡住了。什么是使用最少代码创建侧边栏的最佳方式和大多数浏览器/移动设备友好方式？

HTML

<div class="wrapper">

<section id="content" class="content">

     {squarespace.main-content}

    <div id="sidebar" class="sidebar">

      <squarespace:block-field id="sidebarBlocks" columns="12" />

    </div>
</section>

和CSS

.wrapper {}
.content {}
#sidebar {}

Answer 1

将侧边栏设计为Web用户控件，并将其放在主页面上的以下div结构中。

 <div id="parentContainer">   
        <div id="sitebody" >
            <asp:ContentPlaceHolder  runat="server" ID="MainContent" />    
        </div>
        <div id="sidebar">
            <uc1:ucSideBar ID="ucSideBar1" runat="server" />
        </div>
 </div>

使用css;

修正div

#sidebar
{
    float: left;
    height: 80%;
    width: 250px;
}
 #sitebody
{
    float: left;
    padding: 0 10px;
    width: 60%;
    height :80%;
}

 #parentContainer
 {
    clear: both;
    float: left;
    width: 1500px;
 }

to see this in fiddle

Answer 2

更好的方法是使用带有固定或动态宽度侧边栏的CSS表格布局，如this fiddle。这并不需要任何hacky float clearfixes，而且是cross-browser compatible。

.page {
    display: table;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

.content, .nav {
    display: table-cell;
}

.content {
    width: 100%;
}

.nav {
    min-width: 200px; /* Specify a fixed or percentage width or min-width here if required */
}

/* Stack at smaller widths */
@media screen and (max-width: 640px) {    
    .nav {
        /* You could stack sidebar ontop of content using table-header-group instead */
        display: table-footer-group;
    }
}

如何使用侧边栏创建简单布局

2 个答案: