Question

我正在构建一个灵活适用于任何设备类型和分辨率的页面。我看到了一些引导教程，并根据我从那里学到的内容构建了这个页面。

以下是jsfiddle链接：https://jsfiddle.net/z450vx6x/

以下是代码：

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample Page</title>
<link
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript"
    src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript"
    src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript"
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>

div {
    padding: 10px;
}

.content {
    background-color: white;
}

.header {
    color: white;
    background-color: black;
    text-align: center;
}

.footer {
    color: white;
    background-color: black;
    text-align: center;
}

.topnav {
    background-color: #FFF8DC;
}

.topnav li{
    padding: 10px;
    font-size: 15px;
}

.topnav  li:hover {
    background-color: lightgreen;
    color: black;
}

</style>
</head>
<body>

    <div class="container">
        <div class="header row-lg-1  row-md-1">
            <h3>Header</h3>
        </div>

        <div class="topnav row-lg-1  row-md-1">
            <ul class="list-inline ">
                <li>Home</li>
                <li>Product</li>
                <li>About</li>
            </ul>
        </div>

        <div class="content row-lg-8  row-md-8">
            <strong>What is Lorem Ipsum?</strong>
            <p>Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's standard
                dummy text ever since the 1500s, when an unknown printer took a
                galley of type and scrambled it to make a type specimen book. It has
                survived not only five centuries, but also the leap into electronic
                typesetting, remaining essentially unchanged. It was popularised in
                the 1960s with the release of Letraset sheets containing Lorem Ipsum
                passages, and more recently with desktop publishing software like
                Aldus PageMaker including versions of Lorem Ipsum.</p>
            <strong>Why do we use it?</strong>
            <p>It is a long established fact that a reader will be distracted
                by the readable content of a page when looking at its layout. The
                point of using Lorem Ipsum is that it has a more-or-less normal
                distribution of letters, as opposed to using 'Content here, content
                here', making it look like readable English. Many desktop publishing
                packages and web page editors now use Lorem Ipsum as their default
                model text, and a search for 'lorem ipsum' will uncover many web
                sites still in their infancy. Various versions have evolved over the
                years, sometimes by accident, sometimes on purpose (injected humour
                and the like).</p>
        </div>

        <div class="footer row-lg-1  row-md-1"
            style="background-color: lightgreen">&#169; ABC Group. All
            Rights Reserved</div>
    </div>

</body>
</html>

我的要求是这样的： 1.我需要修复顶层导航，使外观和感觉正常。 2.最重要的问题是如何使内容区域扩展以覆盖浏览器高度，并且对于任何设备屏幕仍然可以灵活。

由于

Answer 1

1。请说明您的意思＆＃34;让它看起来和感觉正常＆＃34;因为有无数的东西可以实现这一点。更具体一点，你想让它居中，动画不同还是别的什么？

2。如果内容太小而无法覆盖整个页面，那么除了调整填充和边距值以将内容定位在内部中心并留下足够的内容之外，您无法做很多事情。在内容周围填充，以便页脚降低。

当然，第2部分还有其他解决方法，但由于您刚开始，我建议您熟悉边距和填充。

P.S。由于您使用的是Bootstrap，请将其他网格类（例如col-md-X）添加到grid div元素中。

使用Bootstrap灵活的内容区域

1 个答案: