固定在窗口顶部的 Div答案

【问题标题】：Div to be fixed at the top of the window固定在窗口顶部的 Div
【发布时间】：2012-10-09 06:23:59
【问题描述】：

伙计们，我想将 div 的宽度和高度固定为 100%。但问题是 div 在一个固定宽度的包装器内。

我在 div 上方有一个按钮，onclick="" 使 div 以全宽和全高更改其类。我想将该 div 定位到窗口的左上角。我的代码是

<html>
<head>
    <title>Javascript Change CSS Class of Div tag</title>

    <style type="text/css">

    #wrapper
    {
        width:75%;
        height:75%;
        margin:0 auto;
    }
    .minimize {
        color : red;
        width:500px;
        height:200px;
        background:#474747;
        float:left;
     } 

     .maximize {
        color : blue;
        width:100%;
        height:100%;
        float:left;
        background:#ccc;
     }

    </style>

    <script language="javascript" type="text/javascript">

        function changeCssClass(navlink)
        {
            if(document.getElementById(navlink).className=='minimize')
            {
                document.getElementById(navlink).className = 'maximize';
            }
            else
            {
                document.getElementById(navlink).className = 'minimize';
            }
        }

    </script>

</head>
<body>   <div id="wrapper">
        <div  id="navlink" class="minimize"><input type="button" value="click here" onclick="changeCssClass('navlink')" /> </div>
        </div>
</body>
</html>

但我想用 wrapper 让它看起来像这样

<html>
<head>
    <title>Javascript Change CSS Class of Div tag</title>

    <style type="text/css">


    .minimize {
        color : red;
        width:500px;
        height:200px;
        background:#474747;
        float:left;
     } 

     .maximize {
        color : blue;
        width:100%;
        height:100%;
        float:left;
        background:#ccc;
     }



</style>

    <script language="javascript" type="text/javascript">

        function changeCssClass(navlink)
        {
            if(document.getElementById(navlink).className=='minimize')
            {
                document.getElementById(navlink).className = 'maximize';
            }
            else
            {
                document.getElementById(navlink).className = 'minimize';
            }
        }

    </script>

</head>
<body>   
        <div  id="navlink" class="minimize"><input type="button" value="click here" onclick="changeCssClass('navlink')" /> </div>
</body>
</html>

这里有没有人帮忙....

如果有人有什么建议？？

【问题讨论】：

你为什么不使用 jQuery 这样做会容易得多.. 看看这个小提琴：jsfiddle.net/gqNsA/5
这很好，它的工作 Berker 如果它不能通过简单的 javascript，我将使用它。感谢这个好建议

标签： javascript css html position

【解决方案1】：

我认为这就是你所追求的，但很难说，因为你没有具体说明 .minimize 和 .maximize 应该保持哪些状态。

请注意，javascript 与您的原始版本大不相同。

由于“类”是 DOM 元素的属性，因此应使用 getAttribute 和 setAttribute 访问它。 IE6 中有一个非常非常古老的错误，它只允许 javascript 通过 className 访问元素的类，但现在情况不再如此。

另外，请注意我是如何处理类属性的。由于您可以在一个元素上指定多个类，因此此代码将其考虑在内。您可以安全地添加更多类，而无需担心最大化和最小化。

要查看的第二件事是 css。无论滚动值是什么，使用 position:fixed 都会将元素锁定到位。在这个例子中，有两种方法可以将 div 设置为全屏。第一个是将宽度和高度指定为 100%。然而，这很脆弱。

最好将 top、right、bottom 和 left 设置为 0。这给您更多的控制权。此外，假设您想要边缘周围的边缘很薄。无需担心将顶部和左侧与宽度和高度混合，您只需为我提到的 4 个属性指定一个像素或百分比值，以获得简单、统一的外观。

【讨论】：

【解决方案2】：

我查看了 Berker 的 fiddle，它将解决您的问题。 Sowmya 使用了这个小提琴，但我做了一些更改，看看这个：

由于class 是DOM 元素的一个属性，它应该使用getAttribute 和setAttribute 访问。 IE6 中有一个非常非常古老的错误，它只允许 javascript 通过className 访问元素的类，但现在不再是这种情况了。

【讨论】：

【解决方案3】：

看看这个小提琴，http://jsfiddle.net/Tv2pP/7/

我认为这就是您所追求的，但很难说，因为您没有具体说明 .minimize 和 .maximize 应该保持哪些状态。

请注意，javascript 与您的原始版本大不相同。

由于“类”是 DOM 元素上的一个属性，因此应该使用 getAttribute 和 setAttribute 来访问它。 IE6 中有一个非常非常古老的错误，它只允许 javascript 通过 className 访问元素的类，但现在情况不再如此。

另外，请注意我是如何处理类属性的。由于您可以在一个元素上指定多个类，因此此代码将其考虑在内。您可以安全地添加更多类，而无需担心最大化和最小化。

要查看的第二件事是 css。无论滚动值是什么，使用 position:fixed 都会将元素锁定到位。在这个例子中，有两种方法可以将 div 设置为全屏。第一个是将宽度和高度指定为 100%。然而，这很脆弱。

最好将 top、right、bottom 和 left 设置为 0。这给您更多的控制权。此外，假设您想要边缘周围的边缘很薄。无需担心将顶部和左侧与宽度和高度混合，您只需为我提到的 4 个属性指定一个像素或百分比值，以获得简单、统一的外观。

最后，如果您可以选择使用像 jQuery 这样的标准化库。多年来，它已成为一个非常有用的工具，可以让您（开发人员）不必过多担心底层浏览器平台的差异。

【讨论】：

我试过这个小提琴花花公子。你能指出我在这个<style> #wrapper { width:75%; height:75%; margin:0 100px; background:#ccc; } .minimize { color : red; width:500px; height:200px; background:#474747; float:left; } .maximize { color : blue; width:100%; height:100%; float:left; background:#ccc; } </style>中犯错的地方吗？
我使用的脚本与小提琴中的脚本相同。 HTML <div id="wrapper"> <div id="navlink" class="minimize"><input type="button" value="click here" onclick="changeCssClass('navlink')" id="btn"/> </div> </div>
我不明白你在问什么。查看我提供的小提琴并阅读 css 和 javascript。它相当不言自明。
小提琴中没有 css，只有 javascript。当我在我的代码中应用那些按钮不起作用
css 与您放置它的位置相同，在 html 部分中。

【解决方案4】：

从包装类中移除margin:0auto

查看http://jsfiddle.net/PAj39/

【讨论】：

【解决方案5】：

看看这个小提琴，http://jsfiddle.net/Tv2pP/7/

我认为这就是你所追求的，但很难说清楚，因为你没有具体说明 .minimize 和 .maximize 应该保持哪些状态。

【讨论】：

【解决方案6】：

从包装类中移除margin:0 auto

查看http://jsfiddle.net/PAj39/

下面的方法使内部 div 与浏览器左上对齐

将position:fixed; top:0; left:0 添加到.minimize

演示http://jsfiddle.net/PAj39/2/

【讨论】：

我还有一些内容，我只是想让特定的 div 位于左上角，它必须隐藏其他内容并全屏显示。
它的作品感谢您的建议。而不是添加位置：固定；顶部：0； left:0 to .minimize 我把它改成了 .maximize 那是我真正想要的输出:)。谢谢
我有一个问题，有没有办法用margin:0 auto修复中间的包装器？
哦，它对我可见。我上传了我的整个编码。可能是一些错误但没关系我明白你的意思
嗯，是的，但它固定在 IE 的左上角。

【解决方案7】：

只需设置 div 宽度：100%；位置：固定；给它。

但是包装器必须有 position:absolute;属性

【讨论】：