Problem mit fester Kopfzeile - kein horizontaler Bildlauf

Ich muss Header während Benutzer scrollen Seite sichtbar haben. Ich setze Header, um feste Position zu sein, und es bleibt beim Scrollen, aber wenn ich die Größe des Browsers ändere, bekomme ich keine horizontale Bildlaufleiste, so dass ich zum Beispiel nicht alle Elemente in der Navigation sehen kann.Problem mit fester Kopfzeile - kein horizontaler Bildlauf

<body>  
     <header> 
      <div id="topHeader"> 
       <p>test</p> 
      </div> 
       <nav> 
        ... navigation items ... 
       </nav>    
     </header> 
     <div id="content"> 
      @RenderBody() 
     </div>  
</body>

Css

#content{margin-top:80px;} 
#topHeader{width: 100%; background: #262626; height: 40px;margin:0;} 
header 
{ 
    width: 100%; 
    position: fixed; 
    top: 0; 
}

Quelle

2012-03-23 1110

Sie sind um die Breite auf 100%, die in diesem Fall 100% des Ansichtsfensters bedeutet. Das Element wird nicht über diesen Punkt hinaus erweitert, also keine horizontale Bildlaufleiste.

Sie sollten wirklich nichts in das Ansichtsfenster reparieren, das nicht in das Bild passt. Erwägen Sie das Hinzufügen einiger Pfeile, um die Navigation zu steuern, wenn sie zu groß wird.

Quelle

2012-03-23 21:46:18

Verwenden Sie die Mindestbreite. und geben Sie älteren Browser eine andere Erfahrung, oder Sie können einige js schreiben, um den Header zu sagen, nie kleiner als dann [Nummer] zu werden. Diese Lösung sollte es für Moderne Browser beheben.

header{ 
    min-width:960px; 
    width: 100%; 
    position: fixed; 
    top: 0; 
}

Quelle

2012-03-23 21:57:31

Wenn ich das hinzufüge, dann ist nur Inhalt scrollbar. – 1110

Sie können auch eine Mindestbreite für den Körper festlegen. –

Das funktioniert nicht. Das Problem ist, weil meine Kopfzeile fest positioniert ist. Aber ich habe keinen anderen Weg gefunden, hier zu machen, was ich will. – 1110

Sie können dies nicht in html/css tun. Gehen Sie zu this site und verkleinern Sie das Browser Fenster weit nach unten, die Fußzeile ist fest positioniert und Sie verlieren den Inhalt auf der rechten Seite, aber wenn Sie die horizontale Bildlaufleiste verwenden, bewegt es sich. Ich habe das mit jQuery gemacht. Hier ist der Code, den ich benutzt habe. Grundsätzlich verschiebe ich, was innerhalb des festen div in Bezug auf die Windows-Scroll-Position ist.

if ($(window).width() < 990) { 
    $('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' }); 
    $('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'}); 
    } 
$(window).scroll(function() { 
    if ($(window).width() < 990) { 
    $('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' }); 
    $('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'}); 
    } 
    else { 
    $('#copyright').css({ 'left': '20px' }); 
    $('#click-to-call, #erving').css({ 'right': '20px' }); 
    } 
});

});

Quelle

2012-03-24 01:22:17 user1289347

Nicht perfekt, aber das hat für mich funktioniert. Ich habe diese Java-Funktion positionContentBelowHeader geschrieben, um den Rand der Inhaltstabelle so zu vergrößern, dass er direkt unter dem festen Header erscheint.

Setzen Sie Ihre feste Kopfzeile, um keine minimale Breite zu haben, und es wird wirklich klein drücken, wenn das Fenster geschrumpft wird. Rufen Sie dann die Positionsfunktion der Position im body-resize-Ereignis auf. Auf diese Weise wird zumindest nichts abgeschnitten, und der Inhalt gleitet nach unten, um sich an den größeren, kompakteren festen Header anzupassen.

In asp.net Code-behind, muss ich auch dieses Add die Positionsfunktion auf Seite laufen

'Save dynamic employee panel height into property using javascript. 
Page.ClientScript.RegisterStartupScript(Me.GetType(), "positionContentBelowHeader", "positionContentBelowHeader();", True)

machen Ich stelle diese im Körper

id = "objMasterPageBody" onresize = "positionContentBelowHeader()";

  <script type="text/javascript"> 

       function positionContentBelowHeader() 
       { 
        //Set header height 
        var headerHeight = document.getElementById('<%= TableHeader.ClientID %>').clientHeight; 
        document.getElementById('<%= hidHeaderHeight.ClientID %>').value = headerHeight;   //margin: 0px auto 0px auto; height: 100%; 
        document.getElementById('<%= TableContent.ClientID %>').setAttribute("style", "height: 100%; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: " + headerHeight.toString() + "px"); 

       } 

      </script>

Quelle

2013-01-30 21:35:19 MarkMeikle

Das ist für mich gearbeitet, um das Verhalten des Facebook-Header

<div id="headercontainer" style="position: fixed; width: 100%"> 
    <div id="actualheader" style="position: relative; width: 1000px; margin: 0 auto"> 
    </div> 
</div>

mit folgendem jquery zu erhalten: für

<SCRIPT> 
    $(window).scroll(function() { 
    $('#actualheader').css('left', -$(this).scrollLeft() + "px"); 
    }); 
</SCRIPT>

nicht getestet Kompatibilität

Quelle

2013-07-13 01:32:21

Das hat sehr gut funktioniert und scheint die einfachste Lösung zu sein. –

Problem mit fester Kopfzeile - kein horizontaler Bildlauf

Antwort

Verwandte Themen