2016-05-06 16 views
0

Ich habe ein Div mit einem Bild drin. Das Bild ist größer als die Größe des Ansichtsanschlusses. So habe ich Scrollbalken sowohl vertikal als auch horizontal. Ich möchte nur das Bild in der div haben und den Browser ignorieren, was Überläufe ohne Scroll-Balken zeigt.Wie kann ich den Überlauf eines div verbergen?

Ich habe versucht, Überlauf zu verstecken, aber das funktioniert nicht für mich.

Das ist mein html:

<div id="outerdiv"> 
    <div id="innerdiv"> 
    <img src="my_pic.jpg"> 
    </div> 
</div> 

Und das ist mein CSS:

#outerdiv { 
    overflow:hidden; 
    width: 100%; 
    height: 100% 
} 

fiddle for it

+0

Können Sie dies in einer Geige replizieren? –

+2

Höhe: 100% erfordert ein Elternteil mit einer Höhe gesetzt, sonst ist es 100% von nichts ... könnte fehlen 'html, Körper {Höhe: 100%}' so Fenster Höhe kann die Referenz sein –

+0

Ich habe eine erstellt Geige, aber ich weiß nicht, wie man es verbindet. Ich habe noch nie eine Geige benutzt. Ich habe mich gerade angemeldet und es erstellt. – user2721815

Antwort

1

Wo hast Du den Überlauf? Wenn Sie die Breite von Outerdiv und Innerdiv festlegen, geben Sie innerdiv "overflow: hidden" an. dann wird das Bild überlaufen, aber nicht scrollen. Sie müssen die Höhe von innerdiv festlegen, um das vertikale Scrollen zu steuern.

+0

Ich habe den Überlauf auf das innere div gesetzt und die horizontale Bildlaufleiste ging weg, aber die vertikale ist immer noch da. – user2721815

+0

ja. Ich habe das im letzten Teil meiner Antwort erwähnt. Sie müssen die Höhe des Innerdivs festlegen, um das vertikale Scrollen zu steuern. Wie groß willst du es haben? Wenn Sie etwas Flexibilität wünschen, können Sie die maximale Höhe verwenden. Der Überlauf entspricht den Abmessungen des Containers, und standardmäßig ist keine Höhe festgelegt. –

+0

OK, ich habe es endlich verstanden. Ich bin mir nicht sicher, welches Ding es repariert hat, weil ich mich so sehr verändert habe, aber es kam darauf an, dass ich ein Semikolon auf der Breitenlinie meines CSS vergessen hatte und es daher nicht richtig funktionierte. nach der Korrektur, dass es richtig funktioniert. Ich gebe dieser Antwort die Ehre, weil ich glaube, dass das letztendlich funktioniert hat. Vielen Dank. – user2721815

0

Stellen Sie Ihre Körpergröße von 100% haben

body,html{ 
height:100%; 
} 
+0

mein Körper hat bereits eine Höhe von 100%. – user2721815

0

add t seinen Stil das Bild

max-width:100%; 
 
max-height:100%;

und setzen unabhängig von Höhe und Breite wollen Sie für die innere div

+0

aber ich möchte das Bild überlaufen. Ich möchte nicht, dass die Größe an den View-Port angepasst wird. – user2721815

+0

Sie möchten also, dass das Bild überläuft, ohne die Bildlaufleisten anzuzeigen? –

+0

Ich denke, das kann Ihnen helfen [link] (http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-beliebt-zu-scroll) –

Verwandte Themen