Question

我的网站顶部有一个工具栏，fixed div。在那里，我有另一个div，里面有一些按钮：

|somethingsomething.com                                       |
---------------------------------------------------------------
|statusBar____________________________________________|buttons|
|rest of website                                              |

HTML：

<div class="statusBar">
    <div class="statusBarMenuButtons">
        <form class="homeButtonForm" action="?id=1" method="post"><button class="homeButton"></button></form>
        <form class="subscriptionsButtonForm" action="?id=2" method="post"><button class="subscriptionsButton"></button></form>
        <form class="searchButtonForm" action="?id=3" method="post"><button class="searchButton"></button></form>                   
    </div>
</div>

CSS：

div.statusBar{  
    position:fixed;
    top:0;
    width:100%;
    height:5%;
}

button{
    height:100%;
    margin-right:10px;
}

form{
    height:100%;
}

/* This is the same for all buttons, just different background-images */
button.homeButton{
    background:url(../resources/homeButton.png) no-repeat;
    background-size:auto 100%; /* width height */
}

现在，我的问题是我无法知道按钮会得到哪个height，因此无法知道我应该指定哪个width。

我在这个网站和Google上搜索过很多关于div的答案，我也找到了jQuery：

<script type="text/javascript">
    var height = $('button.homeButton').height();
    $('button.homeButton').css({
        'width' : height + 'px';
    });
</script>

但它似乎不起作用。我已经提取了这个代码段here，并认为问题可能是我使用的是按钮而不是div。

非常感谢帮助。

Answer 1

试试这个Fiddle此Fiddle与您想要的课程相同

＆＃13;

var height = $('button.homeButton').height();
$('button').width(height);

＆＃13;

div.statusBar {
    top:0;
    width:100%;
    height:5%;
}
button {
    height:100px;
    margin-right:10px;
}
form {
    height:100%;
}
/* This is the same for all buttons, just different background-images */
 button.homeButton {
    background:url(../resources/homeButton.png) no-repeat;
    background-size:auto 100%;
    /* width height */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="statusBar">
    <div class="statusBarMenuButtons">
        <form class="homeButtonForm" action="?id=1" method="post">
            <button class="homeButton"></button>
        </form>
        <form class="subscriptionsButtonForm" action="?id=2" method="post">
            <button class="subscriptionsButton"></button>
        </form>
        <form class="searchButtonForm" action="?id=3" method="post">
            <button class="searchButton"></button>
        </form>
    </div>
</div>

＆＃13;

Answer 2

你不需要JS。

div.statusBar将从子元素中获取高度。如果表格或按钮没有固定的高度，它就不会起作用。使用height:5%;从body或html获取高度，这可能是未定义的。

尝试为div.statusBar添加固定高度

div.statusBar {
   height: 60px;
}

另外，将display: block;添加到button以正确应用宽度和高度属性。

使按钮的宽度与高度相同

2 个答案: