我正在尝试制作一个单页网络应用程序，并且我也在使用 boostrap 3.0。我遇到的问题是制作一个 div 部分，即 <div id="nameContainer"> , 填满整个视口(viewport)，就好像它是自己的页面一样。相反，下一个兄弟<div id="nameContainer">将显示在视口(viewport)上。我以为我可以用 css 位置、宽度和高度属性来解决这个问题，但我没有成功。我如何制作每个 <div id="nameContainer">像它自己的页面一样填充整个视口(viewport)？我最后加载了自己的 CSS 页面，因此我的自定义 CSS 覆盖了任何 Bootstrap 行为。
编辑: width: 100% 和 height: 100% 是无效的，因为 body 不是在静态值(非百分比)中定义的。我如何获得这个尺寸/分配 body 的尺寸以使视口(viewport)的百分比正确？
index.html 部分:
<body class="container">
<div id="lightbox">
<div id="exitButton" type="button" class="btn btn-primary" data-toggle="button">Exit</div>
<div class="well col-lg-8" id="messageBox">
<h3 class="messageBox" >Performing operation...</h3>
</div>
</div>
<div id="lead">
Filler to use as position: absolute
</div>
<div id="shareImageContainer">
<div class="well col-md-3 titleBox">
<div>
<h1>Share Image<br><small>Share image all in one step</small></h1>
</div>
</div>
<form id="shareImageForm">
<div class="form-group btn-group-ls well col-md-5">
<legend>Region</legend>
<input class="form-inline" type="radio" name="region" id="IAD0" value="IAD" checked>
<label for="IAD0" class="btn btn-default region">Virginia</label>
<input class="form-inline" type="radio" name="region" id="ORD0" value="ORD">
<label for="ORD0" class="btn btn-default region">Chicago</label>
<input class="form-inline" type="radio" name="region" id="DFW0" value="DFW">
<label for="DFW0" class="btn btn-default region">Dallas</label>
<input type="radio" id="HKG0" name="region" value="HKG">
<label for="HKG0" class="btn btn-default region">Hong Kong</label>
</div>
<div class="form-group well col-md-5">
<label for="producerUsername">Producer Username</label>
<input type="text" class="form-control" name="producer_username" id="producerUsername" placeholder="Enter producer's username" required>
<label for="producerApiKey">Producer Api Key</label>
<input type="text" class="form-control" name="producer_apikey" id="producerApiKey" placeholder="Enter producer's api key" required>
</div>
<div class="form-group well col-md-5">
<label for="consumerUsername">Consumer Username</label>
<input type="text" class="form-control" name="consumer_username"id="consumerUsername" placeholder="Enter consumer's username" required>
<label for="consumerApiKey">Consumer Api Key</label>
<input type="text" class="form-control" name="consumer_apikey" id="consumerApiKey" placeholder="Enter consumer's api key" required>
</div>
<div class="form-group well col-md-5">
<label for="imageUuid">Image UUID</label>
<input type="text" class="form-control" name="image_uuid" id="imageUuid" placeholder="Enter images's image Uuid" required>
</div>
<div class="col-md-5">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</form>
</div>
<div id="addMemberContainer">
<div class="well col-md-3 titleBox">
<div>
<h1>Add Member<br><small>Add a member to be shared</small></h1>
</div>
</div>
<form id="addMemberForm">
<div class="form-group btn-group-ls well col-md-5">
<legend>Region</legend>
<input class="form-inline" type="radio" name="region" id="IAD5" value="IAD" checked>
<label for="IAD5" class="btn btn-default region">Virginia</label>
<input class="form-inline" type="radio" name="region" id="ORD5" value="ORD">
<label for="ORD5" class="btn btn-default region">Chicago</label>
<input class="form-inline" type="radio" name="region" id="DFW5" value="DFW">
<label for="DFW5" class="btn btn-default region">Dallas</label>
<input type="radio" id="HKG5" name="region" value="HKG">
<label for="HKG5" class="btn btn-default region">Hong Kong</label>
</div>
<div class="form-group well col-md-5">
<label for="producerUsername">Producer Username</label>
<input type="text" class="form-control" name="producer_username" id="producerUsername" placeholder="Enter producer's username" required>
<label for="producerApiKey">Producer Api Key</label>
<input type="text" class="form-control" name="producer_apikey" id="producerApiKey" placeholder="Enter producer's api key" required>
</div>
<div class="form-group well col-md-5">
<label for="imageUuid">Image UUID</label>
<input type="text" class="form-control" name="image_uuid" id="imageUuid" placeholder="Enter images's image Uuid" required>
</div>
<div class="form-group well col-md-5">
<label for="consumerAddId">Consumer/Member account id number to add</label>
<input type="text" class="form-control" name="consumer_tenantid" id="consumer_tenantid" placeholder="Enter member account id number" required>
</div>
<div class="col-md-5">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</form>
</div>
CSS:
#lightbox {
display: none;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
padding: 100px;
position: fixed;
z-index: 85;
background: rgba(0,0,0,.6);
}
.messageBox {
padding-top: 60px;
text-align: center;
}
body {
overflow: hidden;
width:100%;
height:100%;
}
#lead {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
[id*="Container"] {
position: relative;
height: 100% !important;
width: 100% !important;
top: 0px;
left: 0px;
}
最佳答案
我还必须向 html 添加宽度和高度。
body, html {
width: 100% !important;
height: 100% !important;
}
关于html - 单页应用程序 - CSS3 宽度/高度 100% 无效，因为 Bootstrap 未定义主体的静态值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22123333/