Fixed Width List Items erweitern die volle Länge der Seite

Question

Ich habe ein Navigationsmenü, das bis zu 250px in der Breite der linken Seite der Seite und 100% in Höhe nimmt. Ich fügte eine 1. Fixed Top Titelliste Element an der Spitze des Navigationsmenüs, sowie eine 2. Fixed Footer Listenelement am unteren Rand des Navigationsmenüs. Meine Idee ist, beide Elemente zu fixieren, und beide Elemente müssen auch verschwinden, wenn die Browserbreite eine bestimmte Größe hat. aber ich habe ein großes Problem:

Problem 1: Wenn ich hinzufügen, die feste Breite zu .topfilter und. Bottomfilter, die Listenelemente erweitern jetzt die gesamte Breite der gesamten Seite anstelle des Navigationsmenüs.

Problem 2: Nun, wenn ich den Browser der feste Breite Artikel die Größe nicht verschwinden

Bonus: Ich weiß auch nicht, wie man eine Polsterung zum .topfilter hinzuzufügen und .bottomfilter damit sie den Text davor nicht verdecken. Padding-Top und Padding-Bottom funktionieren nicht.

Feste Breite Artikel:https://jsfiddle.net/4fqapznu/1/

.topfilter {border-bottom:solid #333 2px; width:100%; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box; 
    box-sizing: border-box;} 


.bottomfilter {border-top: solid #333 2px; width:100%; height:50px; position:fixed; display:block; text-align:left; background-color:red; -moz-box-sizing: border-box; box-sizing: border-box; bottom:0;} 

HTML:

  <!-- Sidebar --> 
    <div id="sidebar-wrapper"> 


    <ul class="sidebar-nav"> 
    <li class="topfilter"> 
    <a class="filtertitle">Title</a> 
    </li> 

     <li> 
     <a href="#/content"> 
     Content 
     </a> 
     </li> 
       <li> 
     <a href="#/topics"> 
     Topics 
     </a> 
     </li> 
       <li> 
     <a href="#"> 
     Groups 
     </a> 
     </li> 
       <li> 
     <a href="#"> 
     Premium 
     </a> 
     </li> 
     <li> 
     <a href="#">Dashboard</a> 
     </li> 
     <li> 
     <a href="#">Shortcuts</a> 
     </li> 
     <li> 
     <a href="#">Overview</a> 
     </li> 
     <li> 
     <a href="#">Events</a> 
     </li> 
     <li> 
     <a href="#">About</a> 
     </li> 
     <li> 
     <a href="#">Services</a> 
     </li> 
     <li> 
     <a href="#">Contact</a> 
     </li> 

     <li class="bottomfilter"> 
    <a class="filtertitle">Footer</a> 
    </li> 

    </ul> 
    </div> 
    <!-- /#sidebar-wrapper --> 



    <div class="content" style="min-height:90%; background:white;" > 



    </div> 
    <div class="push"></div> 

<footer class="footer"> 


     </footer> 

CSS:

a {outline:none !important;} 

html, 
body, 
.wrap { 
    height: 100%; 
} 

.wrap { 
    box-sizing: border-box; 
} 

form { 
    height: 100% 
} 

.wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin-bottom: -60px; 
    /* for sticky footer to not go below page */ 
    /* for sticky header to not overlap content */ 
} 

.push, 
.footer { 
    height: 60px; 
} 



.footer { 
    background-color: #ebebeb; 
    height: 60px; 
    width: 100%; 
    position: fixed; 
    bottom: 0; 
} 

.content { 
    position: absolute; 
    width: 100%; 
    top: 120px; 
    background-color: yellow; 
    z-index: 0; 
} 


#sidebar-wrapper { 
    z-index: 1000; 
    position: fixed; 
    left: 142px; 
    top: 0px; 
    margin-bottom: 60px; 
    width: 0; 
    height: 100%; 
    margin-left: -142px; 
    overflow-y: auto; overflow-x: hidden; 
    background: #eee; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 


.topfilter {border-bottom:solid #333 2px; width:100%; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box: 
    box-sizing: border-box:} 

.filtertitle { position:relative; display:inline-block; color:#000; width:100%; } 

.topfilter {border-bottom:solid #333 2px; width:100%; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box: 
    box-sizing: border-box:} 

.filtertitle { position:relative; display:inline-block; color:#000; width:100%; } 

.topfilter {border-bottom:solid #333 2px; width:100%; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box; 
    box-sizing: border-box;} 


.bottomfilter {border-top: solid #333 2px; width:100%; height:50px; position:fixed; display:block; text-align:left; background-color:red; -moz-box-sizing: border-box; box-sizing: border-box; bottom:0;} 


#wrapper.toggled #sidebar-wrapper { 
    width: 200px; 
} 

#page-content-wrapper { 
    width: 100%; 
    position: absolute; 
    padding: 15px; 
} 

    #wrapper.toggled #page-content-wrapper { 
    position: absolute; 
    margin-right: -200px; 
} 


/* Sidebar Styles */ 

.sidebar-nav { 
    position: absolute; 
    top: 0px; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px; 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #999999; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #333; 
    background: rgba(255, 255, 255, 0.6); 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    font-size: 18px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

@media screen and (min-width:768px) { 
    #wrapper { 
    padding-left: 300px; 
    } 
    #wrapper.toggled { 
    padding-left: 0; 
    } 


    #wrapper.toggled #sidebar-wrapper { 
    width: 0; 
    } 
    #page-content-wrapper { 
    padding: 20px; 
    position: relative; 
    } 
    #wrapper.toggled #page-content-wrapper { 
    position: relative; 
    margin-right: 0; 
    } 
} 


@media screen and (max-width:1526px) { 

    .content, 
    .footer { 
    width: 82%; 
    right: 0; 
    } 
    .header {width:82%;} 

    #sidebar-wrapper { 
    width: 18%; 
    } 

} 


@media screen and (max-width:1059px) { 

    .content, 
    .footer { 
    width: 80%; 
    right: 0; 
    } 

    .header {width:80%;} 

    #sidebar-wrapper { 
    width: 20%; 
    } 
} 

    @media screen and (min-width:1527px) { 

    .content, 
    .footer { 
    width: 85%; 
    right: 0; 
    } 
    .header {width:85%;} 
    #sidebar-wrapper { 
    width: 15%; 
    } 


} 

     @media screen and (max-width:991px) { 
      .content, 
    .footer { 
    width: 100%; 
    right: 0; 
    } 

    #sidebar-wrapper { 
    width:0; 
    } 

Answer 1

Die Antwort war sehr einfach: https://jsfiddle.net/4fqapznu/3/

Alles, was ich war zu tun hatte:

1. hinzufügen min-width: 100%, und ersetzen Breite: 100% mit Breite: erben auf den übergeordneten Container: .sidebar-nav

2. Dann fügen Sie Breite: inhe rit auf die 2 Kinder mit Position fixiert Artikel: .topfilter und .bottomfilter

Hier ist der Code, der es für mich festgelegt:

.sidebar-nav { 

    width:inherit; min-width:100%; 

} 


.topfilter {width:inherit; position:fixed;} 


.bottomfilter { width:inherit; position:fixed; 

Hinweis: Now I habe ein anderes Problem mit den fixierten Elementen, die die Bildlaufleiste überlappen, aber ich werde diese Frage in einem anderen Thread stellen, es sei denn, jemand hat eine schnelle Antwort darauf, wie es zu beheben ist.