Question

示例JSFiddle：https://jsfiddle.net/eqf8wwxe/

我正在尝试使用带有页脚的语义UI侧栏。但是，页面的高度不会超过页脚高度的视口。

我该怎么做才能纠正这个问题？在这种情况下造成这种情况的原因是什么？

$('.ui.sidebar').sidebar({
	context: $('#main-sidebar-segment')
})

    * {
		border-radius: 0!important;
	}
	
	body {
		background: #f1f1f1;
		//background: #8b8b8b;
		//display: flex;
		//flex-flow: column;
		height: 100%;
	}

	#main-sidebar-segment {
		//display: flex;
		//flex-flow: column;
    }

	.ui.main.container {
		//flex: 1 1 auto;
	}
	
	.ui.inverted.footer.segment {
		//flex: 0 1 40px;
		margin: 0;
		z-index: 1000;
	}
	
	.ui.grid {
		//margin: 1rem;
	}
	
	.ui.inverted.green.dashboard.segment {
		background-color: #2fb34e!important;
		color: #FFF!important;
	}
	
	.ui.inverted.orange.dashboard.segment {
		background-color: #f26b1c!important;
	}
	
	.ui.stat.header.segment {
		padding: 0.5em;
	}
	
	.ui.inverted.dark.blue.segment {
		border: 2px solid #2185D0;
		background-color: #4c4f52!important;
	}
	
	.ui.ordered.large.list .list>.item:before,
	.ui.ordered.large.list > .item::before {
		font-size: 1.3em;
		content: counters(ordered, " ") ". ";
	}
	
	.ui.ordered.large.list .content {
		margin-left: 0.3em;
	}
	
	.ui.secondary.blue.filled.segment {
		background: linear-gradient(rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .2) 100%) #4c4f52;
		background-color: #2185D0!important;
	}
	
	.black.header {
		color: black;
	}
	
	h3.compact.header {
		margin: 0 !important;
	}
	
	.ui.inverted.sidebar {
		background: #37393a;
		//margin-top: 40px !important;
	}

<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 >
	<div id="main-sidebar-segment" style="margin-bottom: 0; border: none;" class="ui bottom attached segment pushable">
      
		<div class="ui left visible inline vertical inverted thin sidebar labeled menu">
			<a class="item">
				<i class="home icon"></i> Home
			</a>
			<a class="item">
			    <i class="bar chart icon"></i>Reports
			</a>
			<a class="item">
			    <i class="ordered list icon"></i>Leaderboards
			</a>
			<a class="item">
			    <i class="configure icon"></i>Tools
			</a>            
		</div>
  	<div class="ui inverted fluid fixed menu">
		<div class="ui container">
			<a class="active item"><i class="home icon"></i>Home</a>
			<div class="compact right menu">
				<div class="ui dropdown item">
					<div class="default text">Select World</div>
					<input type="hidden" value="">
					<i class="dropdown icon"></i>
					<div class="menu">
						<div class="item" data-value="1">World 1</div>
						<div class="item" data-value="2">World 2</div>
						<div class="item" data-value="3">World 3</div>
					</div>
				</div>
				<a class="icon item"><i class="options icon"></i></a>
				<a class="item"><i class="orange sign out icon"></i>Logout</a>

			</div>
		</div>
	</div>        
		<div class="pusher">
		</div>

 	<div class="ui inverted footer segment">
		<div class="ui center aligned container">
			<div class="ui horizontal inverted small divided link list">
				<a class="item" href="#">Report An Issue</a>
				<a class="item" href="#">Chat</a>
				<a class="item" href="#">Contact</a>
			</div>
			<div>
				Created and maintained by
				<a class="teal link" href="#">
					<h5 style="display:inline;" class="ui teal header">
						Douglas Gaskell
					</h5>
				</a>
			</div>

		</div>
	</div>       
	</div>
</body>

Answer 1

.pusher有一个min-height: 100%，这是将您的页脚推出视口的罪魁祸首。

我只是覆盖那个样式（或者如果你在其他地方使用.pusher类为它创建一个新的css类。）

#main-sidebar-segment .pusher {
  min-height: calc(100vh - 80px);
}

我做80px因为这是你的页脚的高度。

https://jsfiddle.net/8yobm8u3/

语义UI边栏高度大于视口大小

1 个答案: