全屏引導網頁僅占顯示的一半
[英]Full screen bootstrap webpage only taking up half of display
問題描述
我試圖創建一個非常基本的CMS版本，並且使用的頁面提供html模板，並允許用戶創建自己的文本和圖像上傳，以在其他地方的顯示器上顯示創建的屏幕。
該模板可以正常工作，並且可以存儲它，但是我的問題是：
當我將模板發送到它自己的網頁上以在另一個屏幕（計算機，電視，電話等）上查看時，整個頁面僅顯示在屏幕的左半部分，無論什么情況，屏幕的一半都是完美的。
為了安全起見，我嘗試刪除所有外部CSS和腳本，但這沒有區別。 唯一的不同是，我從模板頁面中刪除了將所有內容包裝在其頁面上的全局導航菜單，但是我只希望此頁面（使用bootstrap 4網格）填充頁面
在模板中的圖片：
和生活：
我只希望頁面的主體填充任何設備的整個視口，但這只是填充一半，這很奇怪。 我在這里做錯了嗎？
<!DOCTYPE html>
<html>
<head>
<title>Template One</title>
<style type="text/css">
html,
body {
height: 100vh;
width: 100vh;
}
.my-container {
display: flex;
flex-direction: column;
height: 100vh;
width:100vh;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #929292 ;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding:30px;
background-image: url('images/bg6.jpg');
background-size: cover;
}
.my-container>.middle>* {
}
#clock{
/*background-color:#333;*/
font-family: sans-serif;
font-size:40px;
text-shadow:0px 0px 1px #fff;
color:#fff;
}
#clock span {
color:#fff;
font-size:40px;
position:relative;
}
#date {
margin-top: -10px;
letter-spacing:3px;
font-size:20px;
font-family:arial,sans-serif;
color:#fff;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
</head>
<body onload="startTime()">
<!-- Container -->
<div class="container-fluid my-container">
<!-- Top Row -->
<div class="row top">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-3">
<img style="height: 100px;width: 250px;" src="/images/img.svg">
</div>
<div class="col-lg-6">
<a class="weatherwidget-io" href="https://forecast7.com/en/35d16n84d88/?unit=us" data-label_1="" data-label_2="WEATHER" data-days="3" data-theme="original" data-basecolor="" > WEATHER</a>
</div>
<div class="col-lg-3 align-self-center">
<div id="clockdate">
<div class="clockdate-wrapper">
<div id="clock"></div>
<div id="date"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Middle Row -->
<div class="row middle">
<div class="col-lg-6" >
<div style="background-color: white; height: 100%;"><p>Left</p></div>
</div>
<div class="col-lg-6" >
<div style="background-color: white; height: 100%"><p>Right</p></div>
</div>
</div>
<!-- Bottom row -->
<div class="row bottom">
<div class="col-lg-12">
<div class="marquee"><h2>This is a test</h2></div>
</div>
</div>
<!-- end container -->
</div>
</body>
</html>
2 個解決方案
解決方案1
4 已采納 2018-06-19 15:06:42
這可能是以下原因的原因：
.my-container {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vh; /* Problem here! */
}
出於某種原因在此類中設置了width和height ，這與.container-fluid類混淆了。 並且您的width設置為等於視口的高度。
另外，您的body還有一個：
width: 100vh;
您已將body的寬度設置為視口的高度。 將其更改為vw 。
解決方案2
0 2018-06-19 15:11:41
我通過更改html，body和.myContainer的樣式來解決它。 這是我所做的：
html,
body {
margin: 0 auto;
height: 100%;
width: 100%
}
.my-container {
display: flex;
flex-direction: column;
height: 100%;
width:100%;
}
我添加了一個margin 0 auto以擺脫任何其他樣式（您也可以使用用戶規范化），並將值從vh更改為％。 瞧！ 我還擺脫了您的身體startTime（），因為它引發了無效的引用錯誤。
html, body { margin: 0 auto; height: 100%; width: 100% } .my-container { display: flex; flex-direction: column; height: 100%; width:100%; } .my-container>.top [class^="col-"], .my-container>.bottom [class^="col-"] { background-color: #929292 ; color: white; text-align: center; } .my-container>.middle { flex-grow: 1; padding:30px; background-image: url('images/bg6.jpg'); background-size: cover; } .my-container>.middle>* { } #clock{ /*background-color:#333;*/ font-family: sans-serif; font-size:40px; text-shadow:0px 0px 1px #fff; color:#fff; } #clock span { color:#fff; font-size:40px; position:relative; } #date { margin-top: -10px; letter-spacing:3px; font-size:20px; font-family:arial,sans-serif; color:#fff; }
<!DOCTYPE html> <html> <head> <title>Template One</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script> <script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script> </head> <body> <!-- Container --> <div class="container-fluid my-container"> <!-- Top Row --> <div class="row top"> <div class="col-lg-12"> <div class="row"> <div class="col-lg-3"> <img style="height: 100px;width: 250px;" src="/images/img.svg"> </div> <div class="col-lg-6"> <a class="weatherwidget-io" href="https://forecast7.com/en/35d16n84d88/?unit=us" data-label_1="" data-label_2="WEATHER" data-days="3" data-theme="original" data-basecolor="" > WEATHER</a> </div> <div class="col-lg-3 align-self-center"> <div id="clockdate"> <div class="clockdate-wrapper"> <div id="clock"></div> <div id="date"></div> </div> </div> </div> </div> </div> </div> <!-- Middle Row --> <div class="row middle"> <div class="col-lg-6" > <div style="background-color: white; height: 100%;"><p>Left</p></div> </div> <div class="col-lg-6" > <div style="background-color: white; height: 100%"><p>Right</p></div> </div> </div> <!-- Bottom row --> <div class="row bottom"> <div class="col-lg-12"> <div class="marquee"><h2>This is a test</h2></div> </div> </div> <!-- end container --> </div> </body> </html>
使用Bootstrap-4垂直分割屏幕的一半，以顯示圖像直到屏幕邊緣
[英]Vertically split half of the screen with Bootstrap - 4 to display the image till the edge of the screen
如何使用html，css（可能還有bootstrap4）創建14個div的網格，占據整個瀏覽器屏幕的寬度，並在組之間分配分隔符？
[英]How to create a grid of 14 divs taking up full browser screen width with dividers in between groups using html, css (and maybe bootstrap4)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.