0

我想创建一个 html 模板，但它不会正确对齐，并且在我尝试放入东西之前它工作正常，然后它就保持这样。

<html>
    <head><style>
    html, body {
    height:100%;
}
body {
    overflow-y:hidden;
    overflow-x:hidden;
}
header{
    width: 100%;
    background: -webkit-linear-gradient(#0e054d 0%, #2014ff 100%);
    position: fixed;
    top: 0;
    height: 62px !important;
    opacity:.8;
    border-style: Outset;
    border-color: blue;
}

.content {
    position:relative;
    height: 100%;
    width:600px; /* Sizing - any length */
    padding:60px 0 30px 0; /* Header height and footer height */
    margin:0 auto 0 auto; /* Center content */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1, .sidebar2 {
    background: #000047;
    top:59px;
    bottom:30px;
    width: 151px;
    position:absolute;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}


.sidebar1 {

  left: -212;

}

.sidebar2 {
  right: -239;
}

#scrollable2 {
  background:green;
  height: 99%;
  min-width: 750px;
  margin-left: -61px;
  margin-right: 100px;
    overflow:auto;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.button {
    -moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
    box-shadow:inset 0px 1px 0px 0px #f29c93;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background-color:#fe1a00;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #d83526;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #b23e35;
}.button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
    background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
    background-color:#ce0100;
}.button:active {
    position:relative;
    top:1px;
}

footer {
    width: 100%;
    background: #000047;
    position: fixed;
    bottom: 0;
    height: 30px;
}
.p {
    text-align: center;
    color: #bcbcbc;
    font-size: x-large;
}
    </style></head>
    <body>
        <!-- Always on top: Position Fixed-->
        <header>
            <!--<button class="button">Dynmap</button>-->
            <p class="p";>Header</p>
        </header>
        <!-- Fixed size after header-->
        <div class="content">
            <!-- Always on top. Fixed position, fixed width, relative to content width-->
            <div class="sidebar1">

            </div>
            <!-- Scrollable div with main content -->
            <div id="scrollable2">
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
                Server Info</br>
            </div>
            <!-- Always on top. Fixed position, fixed width, relative to content width -->
            <div class="sidebar2">

            </div>
        </div>
        <!-- Always at the end of the page -->
        <footer>

        </footer>
    </body>
</html>

我尝试将按钮放入其中，但顶部未对齐，我无法修复它。

4

1 回答 1

1

A 同意上述意见；你应该使用花车。

但是，如果您想保持绝对位置，以下将起作用。

尝试在下面的两个类中添加“px”：
.sidebar1 { left: -212px; } .sidebar2 { right: -239px; }

将 position: absolute 和 top: 68px 添加到#scrollable2
#scrollable2 { position: absolute; top: 68px; }

在 .sidebar1、.sidebar2 中将顶部从 59px 更新为 67px：
.sidebar1, .sidebar2 { top: 67px; }

演示：http: //jsfiddle.net/uberrobert/9mDng/

于 2012-11-09T21:49:45.760 回答