Question

基本上，我想要一个固定宽度的中心div，以及两个可以按页面大小缩放的侧面板。

复杂的是我想在侧面板上添加一些内容，因此中心div上的（margin：0 auto;）将无效。

这是我尝试过的，但侧面板的宽度元素不会处理。如果我将100％更改为像素值，则可以使用。

HTML

<div class="SidePanel"></div>
<div id="MainPanel"></div>
<div class="SidePanel"></div>

SCSS

/* Variables */
$MainPanelWidth: 800px;

.SidePanel {
    height: 100%;
    width: ((100% - $MainPanelWidth) / 2);
}

#MainPanel {
    height: 100%;
    width: $MainPanelWidth;
}

感谢。

答案：

感谢帮帮！我从here得到了我需要知道的其余内容。

Calc算出了这个等式。
可以像这样插入变量来使用变量＃{$ MainPanelWidth}

SCSS

.SidePanel {
    height: 100%;
    width: calc((100% - #{$MainPanelWidth}) / 2);
}

#MainPanel {
    height: 100%;
    width: $MainPanelWidth;
}

感谢web-tiki和FrançoisWahl。

Answer 1

您可以在CSS中使用calc()，如下所示：

.SidePanel {
    border: solid 1px blue;
    height: 100%;
    width: calc(100% - (800px / 2));
}

#MainPanel {
    border: solid 1px red;
    height: 100%;
    width: 800px;
}

或使用您的SASS / LESS（不确定它是什么）语法：

/* Variables */
$MainPanelWidth: 800px;

.SidePanel {
    height: 100%;
    width: calc(100% - ($MainPanelWidth / 2));
}

#MainPanel {
    height: 100%;
    width: $MainPanelWidth;
}

DEMO - 使用calc（）;

Answer 2

您可以使用calc()（MDN calc()）css函数，如下所示：

<强> DEMO

.SidePanel {
    float:left;
    background:gold;
    height: 100%;
    width: calc(50% - 400px);
}

#MainPanel {
    float:left;
    background:red;
    height: 100%;
    width: 800px;
}

我可以从页面宽度百分比中减去像素宽度吗？

2 个答案: