CSS: Wie verwenden von calc(100% - 20px), um eine Fläche zu füllen, bis alle ANDEREN Bereich als bei einem fixed-width-element?
Entschuldigung für die verworrene Titel. Hier ist mein fiddel:
http://jsfiddle.net/PTSkR/152/
Wenn Sie ziehen Sie den Ergebnisbereich aus, der breiter ist, können Sie sehen, die blauen Bereiche springen. Sie sollen immer das tanken, was Bereich der sidebar (Breite: 275px) nicht. Ich habe versucht, zu verwenden:
width: calc(100%-275px);
Aber es doesn ' T scheinen zu tun den trick. Irgendeine Idee, wie kann ich dies wie erwartet funktioniert?
HTML:
<div id="page-content" class="container-fluid page-host">
<div id="shell-row" class="row-fluid">
<div id="sidebar" class="sidebar-nav span2">
</div>
<div id="browser-body" class="span10">
<ul class="breadcrumb">
</ul>
<div id="container">
</div>
</div>
</div>
</div>
CSS:
#page-content {
padding: 0px;
margin-top: 0px;
height: 100% !important;
}
#shell-row {
height: 100%;
}
#sidebar {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
background-color: #f0f0f0;
height: 100%;
width: 275px !important;
}
#browser-body {
margin: 0px 0px 0px 0px !important;
background-color: lightblue;
width: calc(100%-275px);
}
#browser-body.span10 {
margin: 0px 0px 0px 0px !important;
}
.breadcrumb {
background-color: #d0f0f0;
margin: 0px;
width: 100%;
border-radius: 0px;
padding: 0px;
height: 40px;
line-height: 40px;
}
#container {
padding: 10px;
width: 100%;
}
html, body{height: 100%;}
- Sie brauchen Räume:
width: calc(100% - 275px);
. Die Chrome devtools Stil Inspektor sollte Ihnen anzeigt, dass der Wert falsch ist, ohne die Leerzeichen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Muss es Leerzeichen zwischen den Operanden, etwa so:
Werfen Sie einen Blick auf diese. Rechts oberhalb von "Beispiele" der folgende Hinweis gibt es:
@media (max-width: 767px) [class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] { float: none; display: block; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }