如何让div大小更大？

Question

以下是plunker - http://plnkr.co/edit/wA6s1jgE1QuacGxhOeoP?p=preview

我试图制作

的大小

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

更大但无法

问题

1. 如何让.header更大？
2. 如何在右侧对齐.header-buttons？

我相信CSS会有办法，但我不知道如何，请指导相关来源学习。

谢谢

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％。所以实际高度是基于内容而不是窗口。

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