0
コンテンツと同じ長さですが、display：table-cellを使用するSideMenuはfirefoxとchromeのdisplay：ブロックになります。どうして？CSS設定表示：テーブルセル取得ブロック
.back-branded {
background: #900;
padding-top: 200px;
}
.sideMenu {
padding-left: 0;
padding-right: 5px;
margin-top: 10px;
}
a.list-group-item:hover {
color: inherit;
background: #fff;
text-decoration: none;
}
.form-control {
color: rgb(85, 85, 85);
background: #eee;
box-shadow: none;
-webkit-box-shadow: none;
}
.form-control:hover,
.input-group-addon:hover {
color: rgb(85, 85, 85);
text-decoration: none;
background-color: #e1e1e1;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
cursor: pointer;
}
.container {
background: #fcfdfd;
border-style: solid;
border-image: linear-gradient(to top right, #ddd 0%, #fff 50%) 1;
width: auto;
margin-left: 5px;
margin-right: 5px;
}
.content {
padding-right: 0;
margin-top: 10px;
padding-left: 5px;
}
.col-md-6,
.col-md-12 {
padding: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.btn {
border: 1px solid #c5c5c5;
border-radius: 3px;
color: #454545;
background: #f6f6f6;
}
.sideMenu,
.content {
display: table-cell;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<body>
<div class="col-md-12" style="display:table;">
<div class="back-branded" style="display:table-row;"></div>
<div style="display:table-row;">
<div class="col-md-2 sideMenu" style="overflow: hidden;align-self:stretch;display:table-cell;">
<div class="list-group">
<div class="list-group-item" id="back-btn">
<div class="input-group">
<span class="input-group-addon glyph" id="basic-addon1"></span>
<a class="form-control" aria-describedby="basic-addon1">Center verlassen</a>
</div>
</div>
<div class="list-group-item" id="plan-btn">
<div class="input-group">
<span class="input-group-addon glyph" id="basic-addon1"></span>
<a class="form-control" aria-describedby="basic-addon1">Dienstpläne</a>
</div>
</div>
<div class="list-group-item" id="finance-btn">
<div class="input-group">
<span class="input-group-addon glyph" id="basic-addon2"></span>
<a class="form-control" aria-describedby="basic-addon2">Abrechnung</a>
</div>
</div>
<div class="list-group-item" id="user-btn">
<div class="input-group">
<span class="input-group-addon glyph" id="basic-addon2"></span>
<a class="form-control" aria-describedby="basic-addon2">Benutzer</a>
</div>
</div>
<span class="list-group-item" style="align-self:stretch"></span>
</div>
</div>
<div class="col-md-10 content">
<div class="row">
<div class="col-md-12">
<div class="container">
<!--Hier kommt eine ganz lange Liste-->
</div>
</div>
</div>
</div>
</div>
</div>
</body>：https://jsfiddle.net/pickbreaker/fas55qfs/1/#&togetherjs=D4V6y9nTm9
オブジェクトインスペクタ - スクリーンショット： https://i.stack.imgur.com/KgHS4.png https://i.stack.imgur.com/WwKh7.png
実際に達成したいのですか？すべての '.list-group-item'を垂直にではなく水平に整列させたいのですか？ – Vincent1989
いいえ、私のページのコンテンツがある限り、サイドメニューを持っています。 –