CSS - 可滚动的侧边栏，包括页脚答案

【问题标题】：CSS - scrollable sidebar including footerCSS - 可滚动的侧边栏，包括页脚
【发布时间】：2017-04-23 13:48:11
【问题描述】：

我有一个边栏，边栏底部固定有一个页脚。我想在遇到短高度时添加一个可滚动的侧边栏。

我的 HTML：

<div>
   <aside>
      <header>
        ....
      </header>
      <ul>
        <li> ... </li>
        <li> ... </li>
      </ul>
      <footer>
        <li> ... </li>
      </footer>
   </aside>

   .... 
   ....
</div>

我的 CSS：

.aside {
    background:yellow;
    overflow-y:scroll;
    min-height:100vh; // I also tried height: 100%;
}
.header {
    overflow: hidden;
}
.ul {
   ...
}
.footer {
   position:fixed;
   bottom:0;
}

当我做height:100% 时，似乎忽略了页脚的存在。另一方面，当我设置min-height:100vh 时，我的页脚是固定的，因此它会跟随浏览器的滚动条来显示整个div。

我想要实现的是，如果用户调整浏览器的高度，我希望侧边栏能够响应并显示为可滚动的侧边栏。我更喜欢只使用 CSS 和 HTML 来实现这种行为。

【问题讨论】：

我相信position: fixed 永远不会与父元素“相对”。它总是“相对于窗口。这就是我认为你有问题的原因。很可能页脚不能是位置：固定，在位置内：固定。我会尽快发布一个例子。跨度>

标签： html css scroll css-position sidebar

【解决方案1】：

下面是我通常如何创建侧边栏的示例。（我认为您正在追求以下内容）。我为 aside 周围的 div 包装器添加了一些样式，只是为了为侧边栏本身添加一些“全局”CSS。

我还添加了一些内容来展示它的工作原理。 footer 正在按预期工作。我遇到的一个问题是，要设置页脚的width，您不能使用百分比，因为它的位置为fixed，它与窗口“相对”，而不是与其父元素“相对”。

当然，该示例需要稍加改进，但希望它能为您指明正确的解决方案。

html, body {
  height: 100%;
}

#sidebar-wrapper {
  position: fixed;
  width: 250px;
  height: 100%;
  float: left;
}
aside {
    background:yellow;
    overflow-y:scroll;
  height: 100%;
  width: 100%;
  position: relative;
}
header {
    overflow: hidden;
}
ul {
   
}
footer {
  position: fixed;
  bottom: 0;
  background-color: red;
}

main {
  margin-left: 250px;
  float: left;
}

<div id="sidebar-wrapper">
   <aside>
      <header>
        My Header
      </header>
      <ul>
        <li>Sidebar Item 1</li>
        <li>Sidebar Item 2</li>
        <li>Sidebar Item 3</li>
        <li>Sidebar Item 4</li>
        <li>Sidebar Item 5</li>
        <li>Sidebar Item 6</li>
        <li>Sidebar Item 7</li>
        <li>Sidebar Item 8</li>
        <li>Sidebar Item 9</li>
        <li>Sidebar Item 10</li>
        <li>Sidebar Item 11</li>
        <li>Sidebar Item 12</li>
        <li>Sidebar Item 13</li>
        <li>Sidebar Item 14</li>
        <li>Sidebar Item 15</li>
        <li>Sidebar Item 16</li>
        <li>Sidebar Item 17</li>
        <li>Sidebar Item 18</li>
        <li>Sidebar Item 19</li>
        <li>Sidebar Item 20</li>
        <li>Sidebar Item 21</li>
        <li>Sidebar Item 22</li>
        <li>Sidebar Item 23</li>
        <li>Sidebar Item 24</li>
        <li>Sidebar Item 25</li>
        <li>Sidebar Item 26</li>
        <li>Sidebar Item 27</li>
        <li>Sidebar Item 28</li>
        <li>Sidebar Item 29</li>
        <li>Sidebar Item 30</li>
        <li>Sidebar Item 31</li>
        <li>Sidebar Item 32</li>
        <li>Sidebar Item 33</li>
        <li>Sidebar Item 34</li>
        <li>Sidebar Item 35</li>
        <li>Sidebar Item 36</li>
        <li>Sidebar Item 37</li>
        <li>Sidebar Item 38</li>
        <li>Sidebar Item 39</li>
        <li>Sidebar Item 40</li>
        <li>Sidebar Item 41</li>
        <li>Sidebar Item 42</li>
        <li>Sidebar Item 43</li>
        <li>Sidebar Item 44</li>
        <li>Sidebar Item 45</li>
        <li>Sidebar Item 46</li>
        <li>Sidebar Item 47</li>
        <li>Sidebar Item 48</li>
        <li>Sidebar Item 49</li>
        <li>Sidebar Item 50</li>
        <li>Sidebar Item 51</li>
        <li>Sidebar Item 52</li>
        <li>Sidebar Item 53</li>
        <li>Sidebar Item 54</li>
        <li>Sidebar Item 55</li>
        <li>Sidebar Item 56</li>
        <li>Sidebar Item 57</li>
        <li>Sidebar Item 58</li>
        <li>Sidebar Item 59</li>
        <li>Sidebar Item 60</li>
        <li>Sidebar Item 61</li>
        <li>Sidebar Item 62</li>
        <li>Sidebar Item 63</li>
        <li>Sidebar Item 64</li>
        <li>Sidebar Item 65</li>
        <li>Sidebar Item 66</li>
        <li>Sidebar Item 67</li>
        <li>Sidebar Item 68</li>
        <li>Sidebar Item 69</li>
        <li>Sidebar Item 70</li>
        <li>Sidebar Item 71</li>
        <li>Sidebar Item 72</li>
        <li>Sidebar Item 73</li>
        <li>Sidebar Item 74</li>
        <li>Sidebar Item 75</li>
        <li>Sidebar Item 76</li>
        <li>Sidebar Item 77</li>
        <li>Sidebar Item 78</li>
        <li>Sidebar Item 79</li>
        <li>Sidebar Item 80</li>
        <li>Sidebar Item 81</li>
        <li>Sidebar Item 82</li>
        <li>Sidebar Item 83</li>
        <li>Sidebar Item 84</li>
        <li>Sidebar Item 85</li>
        <li>Sidebar Item 86</li>
        <li>Sidebar Item 87</li>
        <li>Sidebar Item 88</li>
        <li>Sidebar Item 89</li>
        <li>Sidebar Item 90</li>
        <li>Sidebar Item 91</li>
        <li>Sidebar Item 92</li>
        <li>Sidebar Item 93</li>
        <li>Sidebar Item 94</li>
        <li>Sidebar Item 95</li>
        <li>Sidebar Item 96</li>
        <li>Sidebar Item 97</li>
        <li>Sidebar Item 98</li>
        <li>Sidebar Item 99</li>
        <li>Sidebar Item 100</li>
      </ul>
      <footer>
        <li> My Footer </li>
      </footer>
   </aside>
  
</div>

<main>
  <h1>Content</h1>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>35</li>
    <li>36</li>
    <li>37</li>
    <li>38</li>
    <li>39</li>
    <li>40</li>
    <li>41</li>
    <li>42</li>
    <li>43</li>
    <li>44</li>
    <li>45</li>
    <li>46</li>
    <li>47</li>
    <li>48</li>
    <li>49</li>
    <li>50</li>
    <li>51</li>
    <li>52</li>
    <li>53</li>
    <li>54</li>
    <li>55</li>
    <li>56</li>
    <li>57</li>
    <li>58</li>
    <li>59</li>
    <li>60</li>
    <li>61</li>
    <li>62</li>
    <li>63</li>
    <li>64</li>
    <li>65</li>
    <li>66</li>
    <li>67</li>
    <li>68</li>
    <li>69</li>
    <li>70</li>
    <li>71</li>
    <li>72</li>
    <li>73</li>
    <li>74</li>
    <li>75</li>
    <li>76</li>
    <li>77</li>
    <li>78</li>
    <li>79</li>
    <li>80</li>
    <li>81</li>
    <li>82</li>
    <li>83</li>
    <li>84</li>
    <li>85</li>
    <li>86</li>
    <li>87</li>
    <li>88</li>
    <li>89</li>
    <li>90</li>
    <li>91</li>
    <li>92</li>
    <li>93</li>
    <li>94</li>
    <li>95</li>
    <li>96</li>
    <li>97</li>
    <li>98</li>
    <li>99</li>
    <li>100</li>
    <li>101</li>
    <li>102</li>
    <li>103</li>
    <li>104</li>
    <li>105</li>
    <li>106</li>
    <li>107</li>
    <li>108</li>
    <li>109</li>
    <li>110</li>
    <li>111</li>
    <li>112</li>
    <li>113</li>
    <li>114</li>
    <li>115</li>
    <li>116</li>
    <li>117</li>
    <li>118</li>
    <li>119</li>
    <li>120</li>
    <li>121</li>
    <li>122</li>
    <li>123</li>
    <li>124</li>
    <li>125</li>
    <li>126</li>
    <li>127</li>
    <li>128</li>
    <li>129</li>
    <li>130</li>
    <li>131</li>
    <li>132</li>
    <li>133</li>
    <li>134</li>
    <li>135</li>
    <li>136</li>
    <li>137</li>
    <li>138</li>
    <li>139</li>
    <li>140</li>
    <li>141</li>
    <li>142</li>
    <li>143</li>
    <li>144</li>
    <li>145</li>
    <li>146</li>
    <li>147</li>
    <li>148</li>
    <li>149</li>
    <li>150</li>
  </ul>
</main>

这是另一种方法，因为您不需要将页脚设为fixed。

html, body {
  height: 100%;
}

#sidebar-wrapper {
  position: fixed;
  width: 250px;
  height: 100%;
  float: left;
}
aside {
    background:yellow;
    overflow-y:scroll;
  height: 95%;
  width: 100%;
}
header {
    overflow: hidden;
}
ul {
   
}
footer {
  background-color: red;
  width: 100%;
}

main {
  margin-left: 250px;
  float: left;
}

<div id="sidebar-wrapper">
   <aside>
      <header>
        My Header
      </header>
      <ul>
        <li>Sidebar Item 1</li>
        <li>Sidebar Item 2</li>
        <li>Sidebar Item 3</li>
        <li>Sidebar Item 4</li>
        <li>Sidebar Item 5</li>
        <li>Sidebar Item 6</li>
        <li>Sidebar Item 7</li>
        <li>Sidebar Item 8</li>
        <li>Sidebar Item 9</li>
        <li>Sidebar Item 10</li>
        <li>Sidebar Item 11</li>
        <li>Sidebar Item 12</li>
        <li>Sidebar Item 13</li>
        <li>Sidebar Item 14</li>
        <li>Sidebar Item 15</li>
        <li>Sidebar Item 16</li>
        <li>Sidebar Item 17</li>
        <li>Sidebar Item 18</li>
        <li>Sidebar Item 19</li>
        <li>Sidebar Item 20</li>
        <li>Sidebar Item 21</li>
        <li>Sidebar Item 22</li>
        <li>Sidebar Item 23</li>
        <li>Sidebar Item 24</li>
        <li>Sidebar Item 25</li>
        <li>Sidebar Item 26</li>
        <li>Sidebar Item 27</li>
        <li>Sidebar Item 28</li>
        <li>Sidebar Item 29</li>
        <li>Sidebar Item 30</li>
        <li>Sidebar Item 31</li>
        <li>Sidebar Item 32</li>
        <li>Sidebar Item 33</li>
        <li>Sidebar Item 34</li>
        <li>Sidebar Item 35</li>
        <li>Sidebar Item 36</li>
        <li>Sidebar Item 37</li>
        <li>Sidebar Item 38</li>
        <li>Sidebar Item 39</li>
        <li>Sidebar Item 40</li>
        <li>Sidebar Item 41</li>
        <li>Sidebar Item 42</li>
        <li>Sidebar Item 43</li>
        <li>Sidebar Item 44</li>
        <li>Sidebar Item 45</li>
        <li>Sidebar Item 46</li>
        <li>Sidebar Item 47</li>
        <li>Sidebar Item 48</li>
        <li>Sidebar Item 49</li>
        <li>Sidebar Item 50</li>
        <li>Sidebar Item 51</li>
        <li>Sidebar Item 52</li>
        <li>Sidebar Item 53</li>
        <li>Sidebar Item 54</li>
        <li>Sidebar Item 55</li>
        <li>Sidebar Item 56</li>
        <li>Sidebar Item 57</li>
        <li>Sidebar Item 58</li>
        <li>Sidebar Item 59</li>
        <li>Sidebar Item 60</li>
        <li>Sidebar Item 61</li>
        <li>Sidebar Item 62</li>
        <li>Sidebar Item 63</li>
        <li>Sidebar Item 64</li>
        <li>Sidebar Item 65</li>
        <li>Sidebar Item 66</li>
        <li>Sidebar Item 67</li>
        <li>Sidebar Item 68</li>
        <li>Sidebar Item 69</li>
        <li>Sidebar Item 70</li>
        <li>Sidebar Item 71</li>
        <li>Sidebar Item 72</li>
        <li>Sidebar Item 73</li>
        <li>Sidebar Item 74</li>
        <li>Sidebar Item 75</li>
        <li>Sidebar Item 76</li>
        <li>Sidebar Item 77</li>
        <li>Sidebar Item 78</li>
        <li>Sidebar Item 79</li>
        <li>Sidebar Item 80</li>
        <li>Sidebar Item 81</li>
        <li>Sidebar Item 82</li>
        <li>Sidebar Item 83</li>
        <li>Sidebar Item 84</li>
        <li>Sidebar Item 85</li>
        <li>Sidebar Item 86</li>
        <li>Sidebar Item 87</li>
        <li>Sidebar Item 88</li>
        <li>Sidebar Item 89</li>
        <li>Sidebar Item 90</li>
        <li>Sidebar Item 91</li>
        <li>Sidebar Item 92</li>
        <li>Sidebar Item 93</li>
        <li>Sidebar Item 94</li>
        <li>Sidebar Item 95</li>
        <li>Sidebar Item 96</li>
        <li>Sidebar Item 97</li>
        <li>Sidebar Item 98</li>
        <li>Sidebar Item 99</li>
        <li>Sidebar Item 100</li>
      </ul>
   </aside>
      <footer>
        <li> My Footer </li>
      </footer>
  
</div>

<main>
  <h1>Content</h1>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>35</li>
    <li>36</li>
    <li>37</li>
    <li>38</li>
    <li>39</li>
    <li>40</li>
    <li>41</li>
    <li>42</li>
    <li>43</li>
    <li>44</li>
    <li>45</li>
    <li>46</li>
    <li>47</li>
    <li>48</li>
    <li>49</li>
    <li>50</li>
    <li>51</li>
    <li>52</li>
    <li>53</li>
    <li>54</li>
    <li>55</li>
    <li>56</li>
    <li>57</li>
    <li>58</li>
    <li>59</li>
    <li>60</li>
    <li>61</li>
    <li>62</li>
    <li>63</li>
    <li>64</li>
    <li>65</li>
    <li>66</li>
    <li>67</li>
    <li>68</li>
    <li>69</li>
    <li>70</li>
    <li>71</li>
    <li>72</li>
    <li>73</li>
    <li>74</li>
    <li>75</li>
    <li>76</li>
    <li>77</li>
    <li>78</li>
    <li>79</li>
    <li>80</li>
    <li>81</li>
    <li>82</li>
    <li>83</li>
    <li>84</li>
    <li>85</li>
    <li>86</li>
    <li>87</li>
    <li>88</li>
    <li>89</li>
    <li>90</li>
    <li>91</li>
    <li>92</li>
    <li>93</li>
    <li>94</li>
    <li>95</li>
    <li>96</li>
    <li>97</li>
    <li>98</li>
    <li>99</li>
    <li>100</li>
    <li>101</li>
    <li>102</li>
    <li>103</li>
    <li>104</li>
    <li>105</li>
    <li>106</li>
    <li>107</li>
    <li>108</li>
    <li>109</li>
    <li>110</li>
    <li>111</li>
    <li>112</li>
    <li>113</li>
    <li>114</li>
    <li>115</li>
    <li>116</li>
    <li>117</li>
    <li>118</li>
    <li>119</li>
    <li>120</li>
    <li>121</li>
    <li>122</li>
    <li>123</li>
    <li>124</li>
    <li>125</li>
    <li>126</li>
    <li>127</li>
    <li>128</li>
    <li>129</li>
    <li>130</li>
    <li>131</li>
    <li>132</li>
    <li>133</li>
    <li>134</li>
    <li>135</li>
    <li>136</li>
    <li>137</li>
    <li>138</li>
    <li>139</li>
    <li>140</li>
    <li>141</li>
    <li>142</li>
    <li>143</li>
    <li>144</li>
    <li>145</li>
    <li>146</li>
    <li>147</li>
    <li>148</li>
    <li>149</li>
    <li>150</li>
  </ul>
</main>

还要注意，正如 k2snowman69 提到的 flexbox 也可以是一个解决方案，它使代码更简单地实现这样的目标。

【讨论】：

这是一个很好的答案

【解决方案2】：

这里的问题是，当您说高度 100% 或 100vh 时，它不知道页脚的高度，也没有考虑到它。固定位置会将其从文档的“流”中移除并附加到您决定使用顶部、左侧、右侧、底部、高度和宽度来定位它的位置。

如果您的页脚是固定高度，您可以使用 calc(100% - fixedHeight)

如果您的页脚高度可变，我建议您研究 flexbox 布局来解决您的问题：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：