Question

我正在尝试为我的网站未来的管理面板创建一些最小的设计。如果你看here，那就是我当前代码的工作版本。我所拥有的是左侧的导航滑出并将其余页面内容向右推，并隐藏溢出。你输入帖子内容的地方，textarea，就是我遇到问题的地方。如果输入足够的文本页面滚动，因为我将标题和标签输入字段设置为绝对，它们会保持原样。将它们设置为固定并添加一些边距确实使它们与页面一起滚动并且看起来很漂亮，但如果您滑出导航，则固定元素将不会移动。为了让他们这样做，我必须将它们与实际的主容器一起移动，然后在x轴上出现一个滚动条，并尝试在与这些元素相关的各种元素上设置overflow-x: hidden;不会做任何事情。这是我的html和css

    <!DOCTYPE html>
    <html>
    <head>
        <title>New Post</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link href="css/main.css" rel="stylesheet">
        <link href="css/create-post.css" rel="stylesheet">
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href="css/jquery.tagsinput.css" rel="stylesheet">
    </head>
    <body class="main">
        <section>
            <a href="#" class="menu-toggle fa fa-bars"></a>
            <nav class="menu">
                <ul>
                    <li class="logo">Lithium CMS</li>
                    <div class="links">
                        <a href="index.html"><li>Dashboard</li></a>
                        <a href="index.html"><li>Messages</li></a>
                        <a href="index.html"><li>Posts</li></a>
                        <a href="index.html"><li>Pages</li></a>
                    </div>
                </ul>
            </nav>
        </section>

        <section class="content">
            <form>
                <input type="text" name="post-title" class="post-title" placeholder="Title...">
                <div class="post-content-container">
                    <textarea name="post-content" class="post-content" placeholder="What you waiting for, start typing!"></textarea>
                </div>
                <div class="post-tags-container">
                    <input name="post-tags" class="post-tags">
                </div>
            </form>
        <section>

        </section>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="js/jquery.autogrow-textarea.js"></script>
        <script src="js/jquery.tagsinput.js"></script>
        <script>
        $(function() {
            $('.menu-toggle').bind('click', function() {
                $('.main').toggleClass('menu-open');
                return false;
            });

            $('.post-content').autogrow();

            $('.post-tags').tagsInput({
                'width': '100%',
                'height': '',
            });
        });
        </script>
    </body>
</html>

这是我的CSS

    html,
    body {
    height: 100%;
    }

    .main {
    overflow-x: hidden;
    position: relative;
    left: 0;
    }

    .menu-toggle {
    background-color: #333333;
    border-right: 1px solid #111111;
    border-bottom: 1px solid #111111;
    color: #ffffff;
    text-decoration: none;

    padding: 10px;
    padding-right: 11px;

    text-align: center;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    }

    .menu-open .menu-toggle {
    left: 210px;
    z-index: 4;
    }

    .menu-open {
    left: 210px;
    }

    .menu-open .menu {
    left: 0;
    }

       .menu,
       .menu-toggle,
       .main {
        -webkit-transition: left 0.2s ease;
        -moz-transition: left 0.2s ease;
        transition: left 0.2s ease;
       }

   .menu {
    background-color: #333333;
    border-right: 1px solid #111111;
    color: #ffffff;

    position: fixed;
    top: 0;
    left: -210px;
    z-index: 3;


    height: 100%;
    width: 210px;
    }

    .menu li.logo {
    color: #666;
    text-shadow: 1px 0px 1px #000000;
    font-size: 16px;
    font-weight: bolder;
    padding: 10px;
    border-bottom: 1px solid #2f2f2f;
    }

    .menu a {
    color: #eaeaea;
    text-shadow: 1px 0px 1px #555555;
    text-decoration: none;
    font-weight: bolder;
    font-size: 18px;
    }

    .menu a li {
    border-bottom: 1px solid #2a2a2a;

    padding: 10px;

    -webkit-transition: background-color 0.2s ease-in;
    -moz-transition: background-color 0.2s ease-in;
    transition: background-color 0.2s ease-in;
    }

    .menu .links li:hover {
    background-color: #2f2f2f;
    }

    .content {
        position: relative;
        height: 100%;
    }


    .post-title,
    .post-content {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        padding: 15px;

        outline: none;

        width: 100%;
    }

    .post-content {
        resize: none;
    }

    .post-title {
        background-color: #eaeaea;

        font-size: 24px;

        padding-left: 50px;
    }

    .post-content-container {
        max-height: 90%;
    }

    .post-tags-container {
        position: absolute;
        bottom: 0;

        width: 100%;
    }

    div.tagsinput { border:0px; background: #eaeaea; padding:15px; overflow-y: auto;}
    div.tagsinput span.tag { border: 1px solid #888888; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cccccc; color: #333333; margin-right: 5px; margin-bottom:5px; font-size:13px;}
    div.tagsinput span.tag a { font-weight: bold; color: #333333; text-decoration:none; font-size: 11px;  } 
    div.tagsinput input { width:80px; margin:0px; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #333333; outline:0px;  margin-right:5px; margin-bottom:5px; }
    div.tagsinput div { display:block; float: left; } 
    .tags_clear { clear: both; width: 100%; height: 0px; }
    .not_valid {background: #FBD8DB !important; color: #90111A !important;}

Answer 1

你可以很容易地避免这个问题。只需将 .post-tags-container 放在正文末尾（</body>之前）。

试图获得预期效果的问题

1 个答案: