我有一个侧边栏，该侧边栏固定在侧边栏的底部。我想在遇到短高度时添加可滚动的侧边栏。
我的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实现此行为。
下面有一个示例，我通常如何创建侧边栏。(我认为您要像下面一样(。我在div包装器中添加了一些样式，您可以在aside周围拥有一些侧栏本身的"全局" CS。
我还添加了一些内容来展示其工作原理。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可能也是一个解决方案，它使得代码变得更加简单。
这里的问题是，当您说高度100％或100VH时，它不知道页脚的高度，并且不考虑它。固定位置将从文档的"流"中删除它，然后将其粘贴到以上，但您决定使用顶部，左，右，底部，高度和宽度将其定位。
如果您的页脚是固定的高度，则可以使用calc(100％ - 固定率(
如果您的页脚是可变的高度，我建议您研究FlexBox布局以解决您的问题：https：//css-tricks.com/snippets/css/a-guide-to-to-flexbox/