css - How to make div size bigger?

Question

Here is the plunker - http://plnkr.co/edit/wA6s1jgE1QuacGxhOeoP?p=preview

I have tried to make size of

    <div class="pure-u-1 header">
        <div class="header-buttons">
            <button class="pure-button pure-button-primary">Add</button>
            <a class="pure-button pure-button-primary">settings</a>

        </div>
    </div>

bigger but not able to

Questions

1. How can I make .header bigger?
2. How can I align .header-buttons on the right?

I am sure CSS will have a way, but I don't know how, please guide to relevant sources to learn.

Thank you

Answer 1

你的意思是这样吗？

#main .header {
    padding: 1em;
    height: 5%;
    background-color: #15e6c5;
    overflow: hidden;
}

#main .header .pull-right {
  margin-left: 10px;
}

和 HTML

        <div class="header-buttons">
            <button class="pure-button pure-button-primary pull-right">Add</button>
            <a class="pure-button pure-button-primary pull-right">settings</a>
        </div>

小提琴：http ://plnkr.co/edit/rdhZKIB4xYBqqsENpl0Z?p=preview

Answer 2

您必须使用精确值，例如 4em 或 50px。在这种情况下，当内容高于窗口的 5% 时，5% 似乎是最小值。所以实际高度是基于内容而不是窗口。

您还可以使用较低的填充使其美观和平衡。