Question

我在css和jquery中使用相同的代码：

width: 100% -100px;

所以，我使用这段代码：

$(document).ready(function(){
    $('.left').css('width', '100%').css('width', '-=100px');
});

但是在加载网站后调整浏览器大小时，它无法正常工作。我想要使用类似的代码：

.left
{
    width: 80%; //100% -100px;
}
.right
{
    width: 20%; //100px;
}

Answer 1

更新： Demo using jQuery

选项1：

使用jQuery：

function resize_div(selector){
    var curr_width = selector.width(); // get the current width
    new_width = curr_width - 100;
    selector.css('width', new_width);
}

$(document).ready(function(){
    $('.left').css('width', '100%'); // set the width to 100% initially
    resize_div($('.left')); // then resize width on document ready
});
$(window).resize(function(){
    $('.left').css('width', '100%'); // set the width to 100% initially
    resize_div($('.left')); // resize width everytime the window is resized
});

<强> HERE'S A DEMO

选项2：

您可以使用css calc（），例如：

/* Firefox */
width: -moz-calc(100% - 100px);
/* WebKit */
width: -webkit-calc(100% - 100px);
/* Opera */
width: -o-calc(100% - 100px);
/* Standard */
width: calc(100% - 100px);

选项3：

使用padding and box-sizing

.some-div
{
   padding-right: 50px;
   padding-left: 50px;
   width: 100%;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

Answer 2

使用CSS2的解决方案：

<强> HTML

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

<强> CSS

.left {
    position: absolute;
    left: 0px;
    right: 100px;
    background-color: green;
}
.right {
    width: 100px;
    background-color: red;
    float: right;
}
.left, .right {
    height: 50px;
}

.container{
    position: relative;
}

<强> Working Fiddle

在上面的小提琴中，我将position: absolute应用于.left容器。这使得容器不会拉伸父元素（因此，布局将中断）。如果您确定.left容器的高度小于.right容器，请使用上述解决方案。或者如果您知道.left容器的高度将超过.right容器的高度，那么请使用此解决方案。 Fiddle

如果您不确定这些容器的高度并且您不想打破布局，那么我认为最好使用javascript。（如果您知道任何容器的高度，则不需要javascript）

Answer 3

在CSS3中，您可以使用calc：

width: calc(100% - 100px);

根据浏览器支持，您的里程可能会有所不同。链接的页面包含browser compatibility table。

Answer 4

您可以使用calc（）;

 width: calc(100% - 100px);

Answer 5

所有其他人都使用CSS3发布了非常好的解决方案，但是如果你只想使用jQuery，那么这里是解决方法 -

$(document).ready(function(){
    $('.left').css('width', $('.left').parent().width() - 100);
});

<强> DEMO

Answer 6

Demo

box-sizing是CSS3属性。如果您喜欢它，那么您可以使用此代码，否则会有另一个calc属性，我认为该属性不受支持。

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="m">
    <h1>100%-100px
  </div>
  <div id="s">
    100px for me
  </div>
</body>
</html>

CSS：

* {
  margin:0;
  padding:0;
}
html, body {
  height:100%;
}
#m {
  width:100%;
  background:red;
  height:100%;
  margin-left:-100px;
  padding-left:100px;
  vertical-align:top;

  box-sizing: border-box;
  float:left;
}
#s {
  float:left;
  vertical-align:top;
  height:100%;
  width:100px;

  background:green;
}

如何使用css和jquery 100％-100px

6 个答案: