使按钮的宽度与高度相同

Question

I have a toolbar on the top of my website, which is a fixed div . In there I have another div , with some buttons in it:

|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 */
}

Now, my problem is that I have no way of knowing which height the button will get, and therefore cannot know which width I should specify.

I have search a lot on this website and Google and found lots of answers about div s, also I found this jQuery :

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

But it does not seem to work. I have pulled this snippet form here and thought maybe the problem was that I am using a button instead of a div.

Help is very much appreciated.

Answer 1

Try this Fiddle This Fiddle is with the class you wanted

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

 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 */ } 

 <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> 

Answer 2

You don't need JS.

div.statusBar will take the height from child elements. If form or button don't have a fixed height, it won't work. Using height:5%; is taking height from body or html, which may be undefined.

Try adding a fixed height to div.statusBar

div.statusBar {
   height: 60px;
}

Also, add display: block; to the button to apply width and height properties correctly.