Question

我正在尝试获取一个页面，其中有三个... const Pages = StackNavigator({ Index: { screen: MySelf }, Share: { screen: Share }, About: { screen: About }, Service: { screen: Service }, }); const Main = TabNavigator({ Home: { screen: Home }, Dash: { screen: Dash}, Myself: { screen: Pages}, });，它们应该彼此相邻，并且在页面底部应显示第四个<div>。所有这一切都应该是可见的而不滚动，为什么我使用100vh和100vw只使用视野。但它将所有三个<div>置于不同的高度。

这将是一个HbbTV应用程序，这就是全屏显示的重要原因。

<divs>

html,body { margin:0; padding: 0; }
#inputpanel {
  width: calc(40vw - 10px);
}
#selectpanel {
  width: calc(20vw - 10px);
}
#colorpanel {
  width: calc(40vw - 10px);
}
#inputpanel,#selectpanel,#colorpanel {
  display: inline-block;
  box-sizing: border-box;
  height: calc(100vh - 200px);
  margin: 0;
  padding: 0;
}
.b_footer {
  padding: 10px;
  height: 200px;
  background-color: blue;
  text-align: center;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
}
.colorbuttons {
    background-color: #0000ff;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	width: 30%;
	margin: 10px;
	
}

我可以改变什么来实现我正在寻找的东西？

Answer 1

如果您要做的只是在视口中获取所有元素而不进行任何滚动（并使前三个div具有相同的高度），则可以将overflow: hidden;添加到#inputpanel,#selectpanel,#colorpanel样式。这确实会将前两个div上的内容推到该元素的顶部。

但是，我建议使用Flexbox来解决您可能遇到的许多定位问题。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果您要使用Flexbox路线，这是一个起点：

首先，你需要在另一个div中包含前三个div。像<div class="top-container">这样的内容 - 请参阅下面top-container添加的样式。

html,body { 
  margin:0; 
  padding: 0; 
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.top-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  height: calc(100vh - 200px);
}
#inputpanel {
  width: calc(40vw - 10px);
}
#selectpanel {
  width: calc(20vw - 10px);
}
#colorpanel {
  width: calc(40vw - 10px);
}
#inputpanel,#selectpanel,#colorpanel {
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.b_footer {
  padding: 10px;
  height: 200px;
  background-color: blue;
  text-align: center;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
}
.colorbuttons {
  background-color: #0000ff;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 30%;
  margin: 10px;
}

Answer 2

您可以使用浮动并向页脚添加100％的宽度：

#inputpanel,#selectpanel,#colorpanel {
    display: inline-block;
    float: left;
    box-sizing: border-box;
    height: calc(100vh - 200px);
    margin: 0;
    padding: 0;
}

.b_footer {
    float: left;
    padding: 10px;
    height: 200px;
    width: 100%;
    background-color: blue;
    text-align: center;
    color: white;
    font-weight: bold;
    box-sizing: border-box;
}

JFiddle example here.

分区的高度不同

2 个答案: