0

I have a sidebar with a footer fixed on the bottom of the sidebar. I want to add a scrollable sidebar when it encounters short height.

My HTML:

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

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

My CSS:

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

When I do height:100%, it seems like aside is ignore the existence of the footer. On the other hand, when I set min-height:100vh, my footer is fixed so it follows the browser's scrollbar for the entire div.

What I am trying to achieve is that if the user adjust the height of the browser, I want the sidebar to be responsive and appear a scrollable sidebar. I prefer just using only CSS & HTML to achieve this behavior.

SimpleBeat
  • 747
  • 1
  • 10
  • 20
user3784773
  • 175
  • 1
  • 2
  • 8
  • I believe that `position: fixed` is never "relative" to the parent element. It will always be "relative to the window. Which is why I think you have the issue. Most probably the footer can't be position: fixed, inside a position: fixed. I'll try to post an example soon. – Daniel Grima Apr 23 '17 at 05:14

2 Answers2

3

Below there's an example how I usually go about creating a sidebar. (I think you're after something like the below). I've added a bit of style to the div wrapper you have around the aside just to have some "global" CSS for the sidebar itself.

I've also added some content to showcase how it will work. The footer is working as expected. One issue I encountered is that to set the width of the footer you cannot use percentages as since it has a position of fixed it is "relative" to the window and not to its parent element.

Of course the example would need a bit of refining but hopefully it will point you to the right solution.

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>

Here's another way to do it, as you don't need the footer to be 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>

Also note that as k2snowman69 mentioned flexbox could be a solution as well, it makes the code much simpler to achieve something like this.

Daniel Grima
  • 2,765
  • 7
  • 34
  • 58
0

The issue here is that when you say height 100% or 100vh it doesn't know the height of the footer and doesn't take it into account. Position fixed will remove it from the "flow" of the document and affix it to however you decide to position it using top, left, right, bottom, height and width.

If your footer is a fixed height, you could use calc(100% - fixedHeight)

If your footer is a variable height, I'd suggest looking into flexbox layouts to solve your problem: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

k2snowman69
  • 1,849
  • 1
  • 14
  • 19