2017-04-27 5 views
-6

Zunächst möchte ich die normale Fenster Scrollbar ausblenden.CSS Seite Blättern Problem

Dies sind die Änderungen l will:

  • Die gelbe sollte Schnitthöhe Auto sein (kann als die Höhe der Seite mehr sein)
  • die Bildlaufleiste auf sowohl die gelb, weiß und grün sein muss Abschnitt
  • Wenn ich rolle, wollen l die gelben, weißen und grünen Bereich bewegen zusammen
  • Wenn ich die Größe der Seite (vertikal oder horizontal) alle oben sollte noch funktionieren

aktuellen HTML

<html> 

<body> 

<div id="wrapper"> 

<div class="topbar"> 
     RED SECTION 
</div> 

<div class="left side-menu"> 
     THE BLUE SECTION 
</div> 

<div class="content-page"> 
    YELLOW SECTION 
<footer> 
    THE GREEN SECTION 
</footer> 

</div> 

</div> 

</body> 

</html> 

Aktuelle CSS:

html { 
    overflow-x: hidden; 
    position: relative; 
    min-height: 100%; 
} 

body { 
    overflow-x: hidden !important; 
} 

.topbar { 
    left: 0; 
    position: fixed; 
    right: 0; 
    top: 0; 
    z-index: 999; 
} 

body.fixed-left .side-menu.left { 
    bottom: 50px; 
    height: 100%; 
    margin-bottom: -70px; 
    margin-top: 0px; 
    padding-bottom: 146px; 
    position: fixed; 
    width:240px; 
    z-index: 2; 
} 
#wrapper { 
    height: 100%; 
    overflow: hidden; 
    width: 100%; 
} 

.content-page { 
    margin-left: 240px; 
    overflow: hidden; 
} 

Probleme l habe jetzt

  • Wenn ich die Höhe 1000px, die grüne ändern Abschnitt wird ausgeblendet

  • Wenn die Höhe des Browser-Tab reduziert wird, wird ein Teil der Seite versteckt und Scrollen es zeigt nicht

Dank enter image description here

+0

Zuerst können Sie das Verhalten des Browsers von Ihrem Code nicht ändern. Mit anderen Worten, Sie können die Bildlaufleiste nicht entfernen, die vom Browser abhängig ist. poste etwas Code für andere Ausgaben. –

+0

@Elie Nassif Natürlich kann er einfach 'overflow: hidden; 'zum Eltern' 'hinzufügen, dies wird die Bildlaufleiste ausblenden –

+0

@ElieNassif lch stimme nicht mit dir überein. Es kann mit Überlauf versteckt werden: versteckt –

Antwort

1

Sie können dies lernen Sie einige Tricks mit Position mit Für die grünen, blauen und roten Abschnitte mit den Positionen oben, links, rechts oder unten korrigiert und dann mit dem Z-Index überlagert.

Danach können Sie den gelben Abschnitt passend für die gesamte Seite mit den passenden Überlappungen platzieren (wenn der blaue Bereich von links geht: 0 und seine Breite ist 100px, dann Padding-links: 100px). Gleiches gilt für Rot und Grün. Danach erstellen Sie einen Container in der gelben mit der Höhe 100% Breite 100%, Überlauf-y: Auto, würde es den Scroll-Bereich passen, und legen Sie den Inhalt in diesem Container.

Vergessen Sie nicht, den ersten Bildlauf mit html, body {overflow:none} zu deaktivieren. Wenn Sie mehr Details benötigen, wenn ich Zugang zu meinem PC habe, erkläre es besser :)