相关疑难解决方法(0)

我有一个HTML输入.

输入padding: 5px 10px;我希望它是父div的宽度的100%(这是流动的).

然而,使用width: 100%;导致输入是100% + 20px如何绕过这个？

例

让我说我有一个文本框,我想填补整行.我会给它一个这样的风格:

input.wide {display:block; width: 100%}

这会导致问题,因为宽度基于文本框的内容.文本框默认具有边距,边框和填充,这使得100%宽度的文本框大于其容器.

例如,在右边:

有没有办法让文本框填充其容器的宽度而不扩展到它之外？

这是一些示例HTML来显示我的意思:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
        #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
        input.wide {display:block; margin: 0px}
        input.normal {display:block; float: right}
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">
            <input type="text" class="wide" />
            <input type="text" class="normal" />
            <div style="clear:both;"></div>
        </div>
    </div>
</body>
</html>

如果运行此操作,您可以通过查看"普通"文本框看到"宽"文本框伸出容器."普通"文本框浮动到容器的实际边缘.我正在尝试使"宽"文本框填充其容器,而不像"普通"文本框那样扩展到边缘之外.

所以我尝试使用纯CSS,永不使用表格换布局福音,我真的有.但在经历了令人难以置信的痛苦和痛苦之后,我只是准备放弃了.我愿意付出一些努力来完成CSS中的事情,不要误会我的意思.但是当看起来像布局表中可以完成的一些最简单的事情在CSS 中完全不可能时,我不在乎概念纯度是否真的开始受到打击.

现在,我可能看起来很生气,而且我很生气; 我对我浪费的时间感到生气,我很生气从QuarkXpress背景中走出来的人给我带来无用的固定宽度设计,我对CSS失败的承诺感到生气.但我不是想开始争论; 我真的想知道一个简单问题的答案,这个问题将决定我是否会再尝试使用纯CSS的东西,或者在我想要的时候使用布局表.因为我讨厌回到布局表,认为这件事是不可能的,如果它实际上不是.

问题是:有没有办法使用纯CSS布局在左边有一个列,它是固定宽度的,在它右边放置一个数据表,并让数据表整齐地占用剩下的什么空间可用？也就是说,通过在左侧单元格上设置宽度为100%且固定宽度的双单元布局表,可以轻松实现相同的布局？

我有一张桌子:

<table border=1>
    <caption>This is a table.</caption>
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
    </tr>
    <tr>
        <td>Four</td>
        <td>Five</td>
        <td>Six</td>
    </tr>
</table>

我希望它尽可能宽,同时仍然在每侧留下20px的余量.所以,我这样做了:

table{
    border-collapse:collapse;
    margin:20px;
    padding:0;
    width:100%;
}

但它最终是父级的宽度加上左侧额外的20px边距,导致出现垂直滚动条.有没有办法让它比父母的宽度小40px而不添加另一个元素来包围它？

jsfiddle:http://jsfiddle.net/pvHNM/

我的页面上有一个标题,刚好超过100px(确切地说是111px)它下面的div需要延伸到视口的底部,好像我已经将底部设置为0px.问题在于我无法在ie6(bug)中指定顶部和底部.

我可以指定顶部:111px或底部:0px,但我仍然需要高度正确,即.100%-111px,根据视口的大小.

似乎无法让表达式工作,似乎是解决方案

这是我的css代码:

position: absolute; 
width: 200px; 
top: 111px; 
bottom: 0px;

有什么建议？

我偶然发现了一个我不确定如何解决的问题.

我有一个页面,其中包含一些div,其中一个包含一个表,但边距为20px.我需要这张桌子"对接"另一个div的右侧,我已经通过使用-20px的余量完成了 - 按照我的希望工作.由于这个div(覆盖页面的整个右侧)是流动的,因此桌子的宽度为100%.

虽然桌子的左侧是我想要的地方,但右侧现在比其他任何东西都短20px.

有没有一种方法可以保持右边的负边距,而不会将表格从右边移动20px？我尝试了一些没有成功的事情.我的表CSS粘贴在下面.

.pricetable {
    width:100%;
    margin-left: -20px;
    padding: 5px;
}

我不知道是否有方法来设置outerwidth一个的div使用css忽略填充和边框.

当我将a div设置为50%宽度时,填充和边框将添加到宽度.
如果没有javascript或我怎么解决jQuery.outerWidth()？

编辑
不想添加其他额外元素

我只是想进行一项涉及响应式网页设计的研究.不要将这个问题视为必须解决的问题.这只是一个实验:)

有时我们需要将百分比和固定值结合起来进行维度计算,尤其是在创建一些响应式布局时.就我而言,我发现有四种方法可以在纯CSS中实现预期的效果.

问题

让我们快速浏览一下这个问题 - 我们需要创建一个三列布局,扩展到整个页面宽度,其中一列具有恒定宽度,每个剩余列填充可用空间的一半.

<main>
  <section>
    <article class="first">
      I fill out half of the available space!
    </article>
    <article class="second">
      I fill out half of the available space!
      <strong>Be aware that contents of article and aside may be changed!</strong>
    </article>
    <aside>
      I'm 50px width!
    </aside>
  </section>
</main>

我们必须实现以下布局而不修改HTML结构,内容<article>和<aside> 可能会改变.只接受纯CSS解决方案.

解决方案1 ​​ - 跨浏览器的固定布局表

示例:FIDDLE

默认表中每列的宽度是自动计算的,取决于单元格的内容.为了解决问题,我们需要强制列的大小,因此此解决方案使用具有table-layout属性设置的表fixed.它允许设置任何列的宽度.

它可能是最受支持的解决方案(了解更多).

解决方案2 - 使用calc()函数

示例:FIDDLE

calc()函数使我们能够组合百分比和固定值,例如:

article { …

问题:如何将固定高度与灵活的页面布局相结合？

• "bodyDiv"高度必须是:100%(window.innerWidth less？px).
• "a"和"b"的高度必须是:50%(body.div.height less？px).

<HTML>
    <body>
        <div id="headerDiv" style="height:?px">fixed height</div>
        <div id="bodyDiv" style="height:100%">flexible height
            <div id="a" style="height:50%">flexible height</div>
            <div id="x" style="height:?px">fixed height</div>
            <div id="b" style="height:50%">flexible height</div>
            ...
        </div>
    </body>
<HTML>

它已经在JavaScript中完全解决了,但它在页面加载和调整大小事件上看起来很糟糕,因为它太慢了,即使我已经尽力优化它以提高速度.

CSS表达式也不是一个选项,因为据我所知,无论如何都将限制在IE 5-7.

因此,在花了3天试图通过使用负利润和正利润的任意组合来解决这个问题之后,我终于不得不承认最终要求公众帮助的失败.

底部的导航栏是一组像素.如何使chart1(红色背景)覆盖导航栏上方的所有内容.现在它说95%的高度,但在更大的屏幕上,导航栏小于5%,小于大于.谢谢您的帮助!

〜IGNORE~它不会让我提交,因为大多数代码所以我必须添加更多的写作...它不会让我提交,因为大多数代码所以我必须添加更多的写作......它不会让我提交的主要是代码,所以我必须添加更多的写作...它不会让我提交因为大部分代码所以我必须添加更多的写作...它不会让我提交,因为大多数代码所以我必须添加更多的写作...它不会让我提交,因为大多数代码所以我必须添加更多的写作... ~IGNORE END~

#chart1 {
    background-color:red;
    /* Height and width fallback for older browsers. */
    height: 95%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 95vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
    
}

.sideButton {
    position: absolute !important;
    z-index: 10 !important;
    transform-origin: bottom left;
    transform:rotate(7deg);
            -ms-transform:rotate(90deg); /* IE 9 */
            -moz-transform:rotate(90deg); /* Firefox */
            -webkit-transform:rotate(90deg); /* Safari and …