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

时间：2017-04-23 04:49:27

标签： html css scroll css-position sidebar

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

我的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＆amp; HTML来实现这种行为。

2 个答案:

答案 0 :(得分：3)

下面是我通常如何创建侧边栏的示例。 （我认为你是在以下的事情之后）。我为div周围的aside包装器添加了一些样式，只是为了拥有一些＆＃34; global＆＃34;侧边栏本身的CSS。

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

当然这个例子需要一些改进，但希望它会指出你正确的解决方案。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

另请注意，由于k2snowman69提到的flexbox也可以是一个解决方案，它使代码更容易实现这样的事情。

答案 1 :(得分：0)

这里的问题是，当你说高度为100％或100vh时，它并不知道页脚的高度，也没有考虑到它。已修复的位置会将其从＆＃34; flow＆＃34;然后你决定使用顶部，左边，右边，底部，高度和宽度来定位它。

如果页脚是固定高度，则可以使用calc（100％ - fixedHeight）

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

相关问题
最新问题