Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
463 views
in Technique[技术] by (71.8m points)

css - Multi-column issue with horizontal scroll

I have a parent div (main) with the horizontal overflow set to auto. I then have a child element (columns) that has all of my column properties on it. The problem is that once the content goes further than the viewport I can no longer control the right hand margins or padding as the column only seems to go as far as the viewport. For example when I put a background color on "columns" the background only goes as far as the edge of the viewport even though the content scrolls further than that.

.main {
    overflow-x: visible;
    overflow-y: hidden;
    width: 100%;
}
.columns {
    background: red;
    column-fill: auto;
    column-width: 670px;
    column-gap: 80px;
    height: 120px;
    padding: 20px;
    width: auto;
}

<div class="main">
     <div class="columns">
           <p></p>
           <p></p>
           <p></p>
           <p></p>
           <p></p>
     </div>
</div>

Here is an example: http://jsfiddle.net/fyG24/

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

New Answer: Use Pseudo-Elements to Help

Based on your comments, here is new the fiddle that I believe meets your desires. It adds an extra div wrapping .columns I labeled .scroller, and the following css:

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;    
}
.main {
    background: yellow;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.main:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 120px; /* match columns */
    background: red;
    z-index: 0;
}

.scroller {
    overflow-y: hidden;
    overflow-x: auto;
    height: 100%;
    position: relative;
    z-index: 1;
}


.columns {
    -webkit-column-fill: auto;
    -webkit-column-width: 300px;
    -webkit-column-gap: 40px;
    -moz-column-fill: auto;
    -moz-column-width: 300px;
    -moz-column-gap: 40px;
    height: 120px;
    padding: 0 20px;
    text-align: justify;
    width: auto;
}


.columns > p:last-of-type:after {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    float: right;
    margin-right: -20px;
    margin-top: -1px;
}

I use a pseudo-element in .main to give the background for .columns set to the explicit height you intend for those, then I also use another pseudo-element in the last p to force rendering the final 20px of the column. It should work no matter how long or what part it takes up, and at height: 1px and margin-top: -1px it should not generate a new column if it falls right at the end of a column of text.

Original Answer: Move Overflow and Set a Right Margin

To get the background to transfer, you need to change some CSS, namely:

.main {
    overflow: hidden;
    width: 100%;
}

.columns {
    overflow-x: auto;
}

This seems to be because the .column background is being limited by the 100% width on the .main which is in control of the horizontal scroll bar in your original code. By making .main purely hidden, then setting overflow-x: auto on .columns, the scroll is now controlled by the .columns div, and allows its background to be seen.

To fix the absence of padding on the far right side, the only think I could come up with was to add the following:

.columns > p:last-of-type {
    margin-right: 20px;
}

This puts a right margin on the last p element of the immediate children of .columns which then gave the look I assume you are going for.

Here's the fiddle modified (tested only in Firefox).


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...