Question

我要做的是创建一个包含两个部分的网站 - 左侧边栏，其中包含网站/徽标的名称，菜单以及带有版权和社交链接的小页脚。另一部分将是该网站的主要内容。

真的如下图所示，可能使用＆＃39; display：inline-block＆＃39;。

<html>
    <div class="sidebar">

    </div>

    <div class="content">

    </div>
</html>

这样做没有响应似乎相当简单，我可以将侧边栏设置为20％宽度，内容设置为80％。或者将侧边栏设置为固定宽度，例如500px，内容设置为100％ - 500px。但这两种情况似乎都可能导致问题，具体取决于显示器的重新布局。

使用百分比可能会在较小的屏幕上产生太小的侧边栏，而在较大的屏幕上会产生太大的侧边栏。因此给它一个固定的宽度似乎是一个更好的选择，但它可能会产生一个相反的问题，即在小屏幕上太大，而在大屏幕上太小。

以这种方式建立网站是否有任何行业标准？我见过一些网站使用这种类型的设计（主要是摄影师和其他组合风格的用途）。

Answer 1

试试这个：

＆＃13;

#fixedWidth{ 
        width: 200px;
        float: left;
        background: blue;
}
#theRest{
    background: green;
}

＆＃13;

<div id=fixedWidth>Fixed</div>
<div id=theRest>The rest of the space<br>WTF?</div>

＆＃13;

Answer 2

使用@ media Query，这是使用媒体查询制作响应侧边栏的工作示例

body{
  margin:0;
}
.sidebar{
  height:100%;
  position: relative;
  background: #535F8D;
  color: #fff;
}
.main{
  background: #D0D6EF;
}
@media (min-width: 768px){
 .sidebar{
    min-height:100vh;
    float:left;
    width:300px;
  }
  .main{
    margin-left:300px;
    min-height:100vh;/* just for demo , you can delete it*/
  }
}

<div class="container-wrapper">
	<div class="sidebar">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt assumenda numquam eligendi nihil quibusdam dolores similique expedita iure consectetur, molestias odit, ullam dolor id nemo, autem minima quisquam possimus facilis.
	</div>
	<div class="main">
		
	</div>
</div>

如何使用侧边栏制作响应式单页网站？

2 个答案: