css 两个元素-固定宽度和可变宽度(100% -170 px)

vql8enpb 于 2022-12-30 发布在其他

关注(0)|答案(3)|浏览(162)

在我的网站布局的顶层是4个div标签。
第一个是一个全宽度的标题部分，带有css：

#header {
margin-top: 0px;
height: 70px;
border: 4px double rgb(255,255,255);
border-radius: 20px;
background: rgb(88,150,183) no-repeat fixed left top;
padding: 0px;
}

底部是全宽页脚：

#footer {
clear: both;
margin: 0px;
color:#cdcdcd;
padding: 10px;
text-align: center;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}

左边是我的主菜单部分：

#categories {
float:left;
width:150px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}

所有这三个元素都工作正常，它们都在正确的位置，这不会改变用户在显示器上的屏幕分辨率，也不会改变用户是否在最大屏幕上观看。
我的问题是页面的主要元素--所有有趣的东西都在那里。它就在菜单div的右边--或者更确切地说，它应该在右边。我的css是：

#main {
float:right;
min-height: 440px;
width: 80%;
margin-bottom: 20px;
padding:20px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}

width 80%对我的大多数用户来说都还可以，但是对于那些分辨率较低的用户来说，主要元素移到了菜单下面，这太可怕了。
我最理想的是在css #main中设置的宽度大约是（100% -170 px），这样在菜单和main位之间总是留有一个很好的边距，并且永远不会把它推到菜单下面，但是css标准还没有满足这个愿望！
有人能建议我如何修改我的css，给予我一个漂亮干净的页面，对我所有的用户都是干净的吗？或者我需要回去用表格来设置我的页面吗？

css

来源：https://stackoverflow.com/questions/36726007/two-elements-fixed-and-flexible-width-100-170px

3条答案

按热度按时间

0g0grzrc1#

使用CSS3 `flex`

* { box-sizing: border-box; margin: 0; }

#parent{
  display: flex;
}
#aside{
  width: 170px;         /* You, be fixed to 170 */
  background: #1CEA6E;
  padding: 24px;
}
#main{
  flex: 1;              /* You... fill the remaining space */
  background: #C0FFEE;
  padding: 24px;
}

<div id="parent">
  <div id="aside">Aside</div>
  <div id="main">Main</div>
</div>

使用CSS3 `calc`

width: calc(100% - 170px);

示例：
一个三个三个一个

使用`float: left;`和`overflow`

* { box-sizing: border-box; margin: 0; }

#aside{
  width: 170px;         /* You, be fixed to 170 */
  float: left;          /* and floated to the left */
  padding: 24px;
  background: #1CEA6E;
}

#main {
  background: #C0FFEE;
  padding: 24px;
  overflow: auto;        /* don't collapse spaces */
  /* or you could use a .clearfix class (Google for it) */
}

<div id="aside">Aside</div>
<div id="main">Main</div>

使用样式`display: table;`

* { box-sizing: border-box; margin: 0; }

#parent{
  display: table;
  border-collapse: collapse;
  width: 100%;
}
#parent > div {
  display: table-cell;
}
#aside{
  width: 170px;         /* You, be fixed to 170 */
  background: #1CEA6E;
  padding: 24px;
}
#main{
  background: #C0FFEE;
  padding: 24px;
}

<div id="parent">
  <div id="aside">Aside</div>
  <div id="main">Main</div>
</div>

赞(0）回复(0）举报 2022-12-30

yduiuuwa2#

这是您要找的页面吗？您不需要任何css3不需要任何css3

.wrapper {
  width: 800px;
  height: 800px;
  background-color: blue;
}
.content {
  width: auto;
  height: 100%;
  background-color: yellow;
}
.menu {
  width: 170px;
  height: 100%;
  float: left;
  background-color: red;
}

<div class="wrapper">
  <div class="menu">Menu</div>
  <div class="content">
  Aside
  </div>
</div>

赞(0）回复(0）举报 2022-12-30

lf5gs5x23#

您可以使用所有现代浏览器和IE9+支持的'calc'函数，或切换到flexbox（IE11+支持）
查看此笔：https://codepen.io/neutrico/pen/MyXmxa

width: calc(100% - 170px);

请记住，所有边框都很重要，除非您将“box-sizing”设置为“border-box”（或者只是删除这些边框并将它们应用于子元素）。

赞(0）回复(0）举报 2022-12-30

我来回答

css 两个元素-固定宽度和可变宽度(100% -170 px)

3条答案

使用CSS3 `flex`

使用CSS3 `calc`

使用`float: left;`和`overflow`

使用样式`display: table;`

相关问题

热门标签

最新问答

css 两个元素-固定宽度和可变宽度(100% -170 px)

3条答案

使用CSS3 flex

使用CSS3 calc

使用float: left;和overflow

使用样式display: table;

相关问题

热门标签

最新问答

使用CSS3 `flex`

使用CSS3 `calc`

使用`float: left;`和`overflow`

使用样式`display: table;`