Anzeigen der horizontalen Bildlaufleiste beim Einstellen der Breite: 100%

Question

Ich habe 3 DIVs (linkes Feld, Inhalt, rechtes Feld), die über den Browser eingestellt sind, wie der folgende HTML-Code.

Die Klasse .content ist auf 100% Breite eingestellt, um beim Andocken und Abdocken des linken und rechten Felds zu sparen. Bis jetzt läuft alles gut.

Ein Problem ist: der .content hat mehrere Elemente, sie machen am unteren Rand des Browsers eine horizontale Bildlaufleiste anzeigen.

Anstatt die horizontale Bildlaufleiste am unteren Rand des Browsers anzuzeigen, geben Sie mir bitte an, wie Sie es bei .content DIV anzeigen lassen, damit .left-panel, .content und .right-panel im Browser sichtbar sind. Vielen Dank!

Fiddle

HTML

<div class="table"> 
    <div> 
     <div class="left-panel"><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p> 
     </div> 
    </div> 
    <div class="content"> 
     <div style="width:100%; background:#ccc; display: inline-flex"> 
      <div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div> 
     </div> 
     <div style="border:1px solid red;position:absolute;bottom:0">ddddd 
     </div> 
    </div> 
    <div > 
     <div class="right-panel"><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p></div> 
    </div> 
</div> 

CSS

.table > div{ 
display: table-cell; 
} 
.content{ 
position:relative; 
width:100%; border:1px solid red; 
overflow: auto; 
} 
.left-panel, .right-panel{ 
width:200px; 
border:1px solid black; 
height:100%; 
overflow:auto; 
} 

.box { 
width: 300px; 
border: solid 1px red; 
height: 100px; 
} 

Answer 1

Ich habe Ihre CSS aktualisiert.

aktualisiert Tafel links, rechts Platte,

Breite für den Inhalt nicht mit calc() berechnet wird

und gibt Spielraum, um Ihre Inhalte links.

fügen Sie dann Scrollbar Inhalt

.content{ 
 
position: relative; 
 
    width: calc(100% - 388px); 
 
    border: 1px solid red; 
 
    overflow: auto; 
 
    display: inline-block; 
 
    margin-left: 193px; 
 
    margin-top: -8px; 
 
    height: 100vh; 
 
    overflow-x: auto; 
 
} 
 
.left-panel{ 
 
    left:0; 
 
} 
 
.right-panel{ 
 
    right:0; 
 
} 
 
.left-panel, .right-panel{ 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    height: 100%; 
 
    overflow: auto; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
.box { 
 
min-width: 300px; 
 
border: solid 1px red; 
 
height: 100px; 
 
}

<div> 
 

 
\t \t <div class="left-panel"><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p> 
 
\t \t </div> 
 

 
    <div class="content"> 
 
\t \t <div style="width:100%; background:#ccc; display: inline-flex"> 
 
\t \t \t <div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div> 
 
\t \t </div> 
 
\t \t <div style="border:1px solid red;position:absolute;bottom:0">ddddd 
 
\t \t </div> 
 
\t </div> 
 

 
\t \t <div class="right-panel"><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p></div> 
 

 
</div>

http://jsfiddle.net/byx2d460/27/

Answer 2

Wenn Sie die horizontale Bildlaufleiste im Inneren des Inhalts div wollen Sie die Calc-Funktion innerhalb des content div verwenden, wie sagar erklärte brüllen.

Wenn Sie es reaktionsfähig machen wollen und sich nicht um diese minimale Breite innerhalb der box div kümmern, verwenden Sie meine Lösung.

http://jsfiddle.net/byx2d460/30/

.content{ 
position:relative; 
width:100%; 
border:1px solid red; 
overflow: auto; 
} 
.left-panel, .right-panel{ 
width:200px; 
border:1px solid black; 
height:100%; 
overflow:auto; 
} 

.box { 
width: 11%; 
border: solid 1px red; 
height: 100px; 
}