Question

我有一个响应式布局，有两个列（主要和侧边栏）。侧杆具有固定的宽度，并且主柱的宽度是响应的。对于侧边栏是固定宽度，我不能将主列设置为100％而没有侧边栏明显下降。有没有办法让javascript根据浏览器大小计算主列的宽度？（考虑到应该在它旁边的固定宽度列）

＆＃13;

#main {
	background-color: #0F0;
	float: left;
	height: 400px;
	width: 100%;
}
#sidebar {
	background-color: #C60;
	float: right;
	height: 400px;
	width: 300px;
}

＆＃13;

<div id="main">
</div>

<div id="sidebar">
</div>

＆＃13;

Answer 1

这可以使用CSS的calc()函数。

＆＃13;

#main {
  background-color: #0F0;
  float: left;
  height: 400px;
  width: calc(100% - 300px);
}
#sidebar {
  background-color: #C60;
  float: right;
  height: 400px;
  width: 300px;
}
body {
  margin: 0;
}

＆＃13;

<div id="main">
</div>
<div id="sidebar">
</div>

＆＃13;

如果你真的想使用JavaScript，你需要设置main＆＃39; s width等于window＆＃39; s width而不使用滚动条（{ {1}}）减去document.body.clientWidth＆＃39; s sidebar。

此外，在width调整大小时，需要执行函数doMath()。

＆＃13;

window

＆＃13;

var main = document.getElementById('main');
var sidebar = document.getElementById('sidebar');

function doMath() {
  main.style.width = document.body.clientWidth - sidebar.offsetWidth + 'px';
}

doMath();
window.onresize = doMath;

＆＃13;

#main {
  background-color: #0F0;
  float: left;
  height: 400px;
  width: 100%;
}
#sidebar {
  background-color: #C60;
  float: right;
  height: 400px;
  width: 300px;
}
body {
  margin: 0;
}

＆＃13;

使用JS在主列上的响应宽度

1 个答案: