1
例JSFiddleよりも大きくなっています。ただし、ページの高さは、フッターの高さによってビューポートより大きくありません。セマンティックUIサイドバーの高さがビューポートのサイズ
これを修正するにはどうすればよいですか？この状況の原因は何ですか？
$('.ui.sidebar').sidebar({
\t context: $('#main-sidebar-segment')
})* {
\t \t border-radius: 0!important;
\t }
\t
\t body {
\t \t background: #f1f1f1;
\t \t //background: #8b8b8b;
\t \t //display: flex;
\t \t //flex-flow: column;
\t \t height: 100%;
\t }
\t #main-sidebar-segment {
\t \t //display: flex;
\t \t //flex-flow: column;
}
\t .ui.main.container {
\t \t //flex: 1 1 auto;
\t }
\t
\t .ui.inverted.footer.segment {
\t \t //flex: 0 1 40px;
\t \t margin: 0;
\t \t z-index: 1000;
\t }
\t
\t .ui.grid {
\t \t //margin: 1rem;
\t }
\t
\t .ui.inverted.green.dashboard.segment {
\t \t background-color: #2fb34e!important;
\t \t color: #FFF!important;
\t }
\t
\t .ui.inverted.orange.dashboard.segment {
\t \t background-color: #f26b1c!important;
\t }
\t
\t .ui.stat.header.segment {
\t \t padding: 0.5em;
\t }
\t
\t .ui.inverted.dark.blue.segment {
\t \t border: 2px solid #2185D0;
\t \t background-color: #4c4f52!important;
\t }
\t
\t .ui.ordered.large.list .list>.item:before,
\t .ui.ordered.large.list > .item::before {
\t \t font-size: 1.3em;
\t \t content: counters(ordered, " ") ". ";
\t }
\t
\t .ui.ordered.large.list .content {
\t \t margin-left: 0.3em;
\t }
\t
\t .ui.secondary.blue.filled.segment {
\t \t background: linear-gradient(rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .2) 100%) #4c4f52;
\t \t background-color: #2185D0!important;
\t }
\t
\t .black.header {
\t \t color: black;
\t }
\t
\t h3.compact.header {
\t \t margin: 0 !important;
\t }
\t
\t .ui.inverted.sidebar {
\t \t background: #37393a;
\t \t //margin-top: 40px !important;
\t }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<body >
\t <div id="main-sidebar-segment" style="margin-bottom: 0; border: none;" class="ui bottom attached segment pushable">
\t \t <div class="ui left visible inline vertical inverted thin sidebar labeled menu">
\t \t \t <a class="item">
\t \t \t \t <i class="home icon"></i> Home
\t \t \t </a>
\t \t \t <a class="item">
\t \t \t <i class="bar chart icon"></i>Reports
\t \t \t </a>
\t \t \t <a class="item">
\t \t \t <i class="ordered list icon"></i>Leaderboards
\t \t \t </a>
\t \t \t <a class="item">
\t \t \t <i class="configure icon"></i>Tools
\t \t \t </a>
\t \t </div>
\t <div class="ui inverted fluid fixed menu">
\t \t <div class="ui container">
\t \t \t <a class="active item"><i class="home icon"></i>Home</a>
\t \t \t <div class="compact right menu">
\t \t \t \t <div class="ui dropdown item">
\t \t \t \t \t <div class="default text">Select World</div>
\t \t \t \t \t <input type="hidden" value="">
\t \t \t \t \t <i class="dropdown icon"></i>
\t \t \t \t \t <div class="menu">
\t \t \t \t \t \t <div class="item" data-value="1">World 1</div>
\t \t \t \t \t \t <div class="item" data-value="2">World 2</div>
\t \t \t \t \t \t <div class="item" data-value="3">World 3</div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <a class="icon item"><i class="options icon"></i></a>
\t \t \t \t <a class="item"><i class="orange sign out icon"></i>Logout</a>
\t \t \t </div>
\t \t </div>
\t </div>
\t \t <div class="pusher">
\t \t </div>
\t <div class="ui inverted footer segment">
\t \t <div class="ui center aligned container">
\t \t \t <div class="ui horizontal inverted small divided link list">
\t \t \t \t <a class="item" href="#">Report An Issue</a>
\t \t \t \t <a class="item" href="#">Chat</a>
\t \t \t \t <a class="item" href="#">Contact</a>
\t \t \t </div>
\t \t \t <div>
\t \t \t \t Created and maintained by
\t \t \t \t <a class="teal link" href="#">
\t \t \t \t \t <h5 style="display:inline;" class="ui teal header">
\t \t \t \t \t \t Douglas Gaskell
\t \t \t \t \t </h5>
\t \t \t \t </a>
\t \t \t </div>
\t \t </div>
\t </div>
\t </div>
</body>
わかりました。ありがとう！ –