并排划分，宽度自动调整

Question

Hello Stack溢出用户。 我在这里有点挣扎，我有4个div。

我希望div 4在调整屏幕尺寸时调整宽度。基本上只是留在其他div，并调整。 Div 1,2和3都有position:fixed，以避免当用户在页面上滚动时它们移动。

但无论我尝试什么，用width:auto ETC。 div 4保持在div 3后面的全长。我有一个边距设置为它传递div 1的宽度。

我一直很难缠绕这个，我的div的代码列在下面。

.navbar-left {
  position: fixed;
  width: 325px;
  top: 0px;
  bottom: 0;
  z-index: 1001;
  height:auto;
}

.navbar-top{
 width:100%;
 height:60px;
 position:fixed;
 top:0;
 z-index:1002;
}

.navbar-right{
  width: 365px;
  top:0;
  height:100%;
  position:fixed;
  right:0;
}

未列出Div 4，因为代码不起作用。非常感谢任何帮助。

Answer 1

试试这段代码......

.div4{ width:calc(100% - 730px);
       background-color: green;
       margin:0 auto;
       position:relative;
       top:60px;}

其中730px是左右div宽度的总和......

Answer 2

使用导航栏左侧，导航栏右侧和中间部分的百分比。

不要忘记为左右div设置 GoogleCredential credential = new GoogleCredential.Builder() .setTransport(httpTransport) .setJsonFactory(jsonFactory) .setServiceAccountId(serviceAccountID) .setServiceAccountScopes(scopes) .setServiceAccountPrivateKeyFromP12File(licenseFile) .build(); com.google.api.services.calendar.Calendar.Builder builder = new com.google.api.services.calendar.Calendar.Builder(httpTransport, jsonFactory, credential); builder.setApplicationName(appName); com.google.api.services.calendar.Calendar client = builder.build(); com.google.api.services.calendar.Calendar.Events.List list = client.events().list(calendarID); list.setMaxAttendees(maxAttendees); list.setTimeZone(timeZone); list.setTimeMin(startTime); list.setTimeMax(endTime); list.setOrderBy(orderBy); list.setShowDeleted(showDeleted); list.setSingleEvents(true); Events events = list.execute(); （导航栏顶部的高度）。

jsFiddle Demo

＆＃13;

＆＃13;

top:60px

＆＃13;

/* *CSS:* */

div {
	position: relative;
	box-sizing: border-box;
}
.navbar-top {
	position: fixed;
	width: 100%;
	height: 60px;
	top: 0;
	left: 0;
	z-index: 2;
}
.navbar-left {
	position: fixed;
	width: 20%;
	height: 100%;
	top: 60px;
	left: 0;
	z-index: 1;
}
.navbar-right {
	position: fixed;
	width: 20%;
	height: 100%;
	top: 60px;
	right: 0;
}
.myBody {
	width: 60%;
	margin: 60px auto 0px;
}
.navbar-top {
	background: blue;
}
.navbar-left {
	background: red;
}
.navbar-right {
	background: green;
}
.navbar-top {
	background: wheat;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个fiddle

如果您需要使用固定位置（实际上我不明白为什么），您可以使用百分比作为主div，使用像素作为侧边栏。

在主div中设置宽度使用：

宽度：计算（100％ - 400px）; 其中400px是两个边栏宽度的总和

HTML

 <div clas="container">
  <div class="top">top</div>
  <div class="left">left</div>
  <div class="main">main</div>
  <div class="right">right</div>
</div>

CSS

.container {width: 100%; height: 100%;}
.top {
  position: fixed;
  clear: both;
  width: 100%;
  height: 20%;
  background-color: #d5d5d5;
}

.left {
  position: fixed;
  top: 20%;
  width: 40px;
  float: left;
  height: 80%;
  background-color: green;
}
.main {
  width: calc(100% - 80px);
  height: 80%;
  position: fixed;
  top: 20%;
  left: 40px;
  background-color: grey;

}
.right {
  width: 40px;
  height: 80%;
  position: fixed;
  top: 20%;
  right: 0;
  background-color: green;
}

Answer 4

给每个宽度等于100％。给左div 20％div 4 60％和右div 20％。或者，使用现有代码，给第4个div 100％。