时间戳

首页 > 解决方案 > 简单的单页应用程序模板引导程序

html - 简单的单页应用程序模板引导程序

问题描述

我正在尝试制作一个完全适合一个页面的引导模板，其中垂直菜单栏是页面上唯一的可滚动元素，问题是整个页面都是可滚动的。这是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container-fluid">
    <div class="container-fluid">
      <div class="row" style="height:10%;">
        <div class="col-lg-12 col-md-12 bg-success">banner</div>
      </div>
    </div>


    <div class="container-fluid">
      <div class="row" style="height:80%;">
        <div class="col-lg-2 col-md-2 bg-success">Menu</div>
        <div class="col-lg-10 col-md-10 bg-warning">content</div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row" style="height:10%;">
        <div class="col-lg-12  col-md-12 bg-success">footer</div>
      </div>
    </div>

  </div>

</body>

</html>

标签： htmlcsstwitter-bootstrap

解决方案

按照 Bootstrap 文档尝试这个结构。

body, html, main {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.h-10v {
  height: 10vh;
}
.h-80v {
  height: 80vh;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

</head>



<body>

  <main>
    	<header class="bg-secondary h-10v">
    		Banner here.
    	</header>
    	<section class="row bg-dark h-80v">
    		<div class="col-xs-12 col-sm-12 col-md-4 bg-warning">
				<ul class="nav flex-column">
					<li class="nav-item">
						<a class="nav-link active" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
    		</div>
    		<div class="col-xs-12 col-sm-12 col-md-8 bg-light">
    			<p>This area content.</p>
    		</div>
    	</section>
    	<footer class="bg-primary h-10v">
    		This is footer.
    	</footer>

  </main>

</body>

</html>

https://codepen.io/pauloserafimtavares/pen/jpdrBG

推荐阅读